Sail Away......

05/29/2012

My intentions were to create a colorful fun image which could be used as a child clothing label; because of my love of he ocean and sailing.




context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 5;

context.fillStyle = "rgb(100,255,100)";
context.fill();
context.stroke();


for (var yay=0; yay<canvas.height/2*2; yay+=10) {

var startX = -100/2-yay;
var startY = canvas.height-yay/2;
var endX = canvas.width-200;
var endY = canvas.height*0.5;
//control poimt 1
var cpoint1X = canvas.width*yay-500;
var cpoint1Y = canvas.height*3/4;
//control point 2
var cpoint2X = canvas.width*0.75/2;
var cpoint2Y = canvas.height/yay-600;

context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpoint1X, cpoint1Y, cpoint2X, cpoint2Y, endX, endY);
context.fillStyle = "yellow";
context.fill()
context.strokeStyle = "aqua/yellow"
context.lineWidth = 2/3*4;
context.stroke();
//boat
var startX = 150;
var startY = canvas.height/2;
var endX = 600;
var endY = canvas.height/2;

var cpointX = canvas.width/2;
var cpointY = canvas.height;

var start1X = 400;
var start2Y = 300/2;
var end1X = 400;
var end1Y = 275;

var cpoint1X = 400;
var cpoint1Y = 300;
var grd = context.createLinearGradient(150, 250, 380, 200);



        // add linear gradient
        var grd = context.createLinearGradient(230, 0, 370, 200);
        // light blue
        grd.addColorStop(0, "#8ED6FF");
        // dark blue
        grd.addColorStop(1, "#004CB3");
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 2;
        context.strokeStyle = "blue";
        context.stroke();


context.closePath();
        context.lineWidth = "aqua";
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.strokeStyle = "yellow";
        context.stroke();


context.beginPath();
context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
        context.lineWidth = 1;
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.strokeStyle = "blue";
        context.stroke();
context.closePath();
context.strokeStyle = "rgb(0,10,0)";
context.fillStyle = "rgb(0,5,0)";
        context.lineWidth = 0.0;
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.strokeStyle = "pink";
        context.stroke();
context.fill();
context.lineWidth = 0.1;
context.stroke();

context.beginPath();
     
        context.stroke();

//sail
context.beginPath();
        context.moveTo(100, 198);
        context.quadraticCurveTo(300, cpoint1Y, end1X, end1Y);
// add linear gradient
      context.createLinearGradient(100, 0, 370, 200);
        // light blue
        grd.addColorStop(0, "pink");
        // dark blue
        grd.addColorStop(0.5, "red");

grd.addColorStop(1, "pink");
     
context.fillStyle = grd;
        context.closePath();
     
context.fill();
        context.fillStyle = grd;


context.beginPath();
        context.moveTo(100, 200);
        context.lineTo(400, 0);
        context.lineTo(400, 300);
context.closePath();
context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "pink";
        context.stroke();


 context.beginPath();
        context.moveTo(170, 80);
        context.bezierCurveTo(130, 100, 130, 150, 230, 150);
        context.bezierCurveTo(250, 180, 320, 180, 300, 150);
        context.bezierCurveTo(420, 150, 300, 120, 290, 100);
        context.bezierCurveTo(410, 40, 300, 30, 300, 50);
        context.bezierCurveTo(320, 5, 250, 20, 250, 50);
        context.bezierCurveTo(200, 5, 150, 20, 170, 80);
        context.closePath();


        context.fillStyle = "#8ED6FF";
        context.fill();
        //context.strokeStyle = "pink";
        //context.stroke();/**/


}