Canvas Project

This code is an idea of my perfect getaway. I love nature so I had to recreate my own idea of a perfect place to take in the scenery and relax! My biggest struggle was definitely the bushes for the tree, as you may be able to tell. I used Bezier curves for the bushes, tree, and flower. I used a quadratic curve for the hill. I used line to for the flower stem and the surround of the water.




//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

var myGradientD = context.createLinearGradient(50,600,50,100,300,800);
myGradientD.addColorStop(1,"rgba(55,174,209,1)");
myGradientD.addColorStop(.50,"rgba(106,227,255,1)");
myGradientD.addColorStop(.55,"rgba(255,227,255,1)");
myGradientD.addColorStop(1,"rgba(67,212,255,1)");


context.beginPath();

context.rect(0,0,800,600);

context.closePath();

context.fillStyle = myGradientD;
context.fill();

 // SUN

var sungrd = context.createRadialGradient(450,280,20,450,300,100);

sungrd.addColorStop(0, "rgba(255,255,0,1)");
sungrd.addColorStop(1, "rgba(205,205,0,.5)");

context.beginPath();

context.arc(450,280,100,0,Math.PI*2, true);

context.closePath();
context.fillStyle = sungrd;
context.fill();









/// BUSHES IN THE BACKGROUND TO THE LEFT


context.beginPath();

context.moveTo(0,370); // A
context.bezierCurveTo(0,200,40,200,50,370);

context.bezierCurveTo(50,230,80,230,100,370);

context.bezierCurveTo(100,230,120,230,150,370);

context.bezierCurveTo(150,230,160,230,200,370);

context.bezierCurveTo(200,230,200,230,250,370);

context.bezierCurveTo(240,230,240,200,300,370);

context.bezierCurveTo(300,230,310,230,350,370);

context.bezierCurveTo(350,230,360,230,400,370);

//// context.bezierCurveTo(400,230,400,230,450,300);


context.closePath();
/// BUSHES IN THE BACKGROUND TO THE RIGHT



context.moveTo(520,370);
context.bezierCurveTo(540,230,570,230,570,370);
context.bezierCurveTo(580,210,610,230,610,370);
context.bezierCurveTo(610,230,650,230,650,370);
context.bezierCurveTo(660,230,690,230,690,370);
context.bezierCurveTo(700,205,720,230,740,370);
context.bezierCurveTo(760,230,760,230,800,390);

context.fillStyle = "rgba(42,156,56,1)";
context.fill();
context.stroke();



context.beginPath();


context.closePath();
context.fillStyle = "rgba(42,156,56,1)";
context.fill();
context.stroke();








// HILL



context.beginPath();
// Starting coordinates
context.moveTo(0,390);
// QUAD REQUIRES CP1X, CP1Y, BX,BY = ENDING POINT

context.quadraticCurveTo(500,250,800,390);



context.closePath();
context.fillStyle = "rgba(52,255,57,1)";
context.fill();
context.stroke();






// LEFT THING


context.beginPath();
context.moveTo(400,460);
context.lineTo(0,350);
context.lineTo(0,550);


context.closePath();
context.fillStyle = "rgba(52,255,57,1)";
context.fill();context.lineWidth = 5;
context.strokeStyle= "rgba(66,43,12,1)";
context.stroke();


 // LEFT THING 2


context.beginPath();
context.moveTo(450,550);
context.lineTo(0,470);
context.lineTo(0,700);

 context.closePath();

context.fillStyle = "rgba(52,255,57,1)";
context.fill();context.lineWidth = 5;
context.strokeStyle= "rgba(66,43,12,1)";
context.stroke();


// RIGHT THING


context.beginPath();
context.moveTo(410,390);
context.lineTo(800,380);
context.lineTo(800,550);


context.closePath();
context.fillStyle = "rgba(52,255,57,1)";
context.fill();context.lineWidth = 5;
context.strokeStyle= "rgba(66,43,12,1)";
context.stroke();


 // RIGHT THING 2

context.beginPath();
context.moveTo(460,500);
context.lineTo(900,450);
context.lineTo(900,700);


context.closePath();
context.fillStyle = "rgba(52,255,57,1)";
context.fill();context.lineWidth = 5;
context.strokeStyle= "rgba(66,43,12,1)";
context.stroke();





 /// TREE

context.beginPath();

context.moveTo(50,400);
context.bezierCurveTo(60,420,30,150,50,200);
context.bezierCurveTo(60,200,100,200,135,200);
context.bezierCurveTo(150,200,150,100,150,410);

context.lineTo(50,400);



context.fillStyle= "rgba(66,43,12,1)";
context.fill();
context.stroke();
context.closePath();





/// TREE BUSH

context.beginPath();

context.bezierCurveTo(150,100,300,0,210,140);


context.bezierCurveTo(210,140,350,200,220,210);

context.bezierCurveTo(220,200,150,350,150,200);

context.bezierCurveTo(150,200,130,320,90,250);

context.bezierCurveTo(90,250,85,230,90,200);

context.bezierCurveTo(90,200,0,400,40,180);

context.bezierCurveTo(40,180,-100,50,60,90);

context.bezierCurveTo(60,-10,90,-10,150,100);



context.fillStyle = "rgba(52,255,57,1)";
context.fill();


context.stroke();

context.closePath();







// STEM

context.beginPath();


context.moveTo(695,800);
context.bezierCurveTo(695,800,695,50,695,730);

 context.closePath();

context.fillStyle = "rgba(52,255,57,1)";
context.fill();context.lineWidth = 10;
context.strokeStyle= "rgba(42,103,24,1)";
context.stroke();


// FLOWER

context.beginPath();
    context.moveTo(687,435);
    context.bezierCurveTo(615,390,640,440,680,445);
    context.bezierCurveTo(610,440,635,475,685,452);
    context.bezierCurveTo(645,505,690,490,695,453);
    context.bezierCurveTo(700,510,740,500,700,450);
    context.bezierCurveTo(750,455,750,425, 700, 440);
    context.bezierCurveTo(700,390,685,390,687,435);
    context.closePath();
    context.fillStyle="rgba(255,252,91,1)";
    context.fill();
    context.lineWidth=1
    context.strokeStyle="rgba(0,0,0,1)";
    context.stroke();





















//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE