Sun-Daze

This is my final canvas project entitled "Sun-daze". I am very happy with how the final project came out. I have had this idea for a while, but I wasn't sure how I would even know the tools to create it. This one actually took me less time than my pineapple. It took me maybe about 6-7 hours overall. I bought some graph paper, and it made it so much easier for me.  Throughout the project, I learned a lot about gradients. Each little aspect of this project has a gradient. It was something I was struggling with before, so I wanted to make sure that I included in my final project. I love the palm trees the most because of all the different shades of green in them. If I were to change anything, I would definitely change the birds. They look like they were thrown in last minute and I know that I could have done better. I would also change the sun and make a gradient around it. I wasn't sure how to do it, but I would rather have had a sun that had undefined lines instead of just a circle. Overall, I am very happy with how this turned out!





Look below for a bonus canvas project for fun!

I wanted to experiment what it would look like with a sunset. Sunsets are my favorite things in the world. I wanted to  experiment with what it could look like. I really like how the silhouettes of the palm trees came out.















var bkgdgrd = context.createLinearGradient(0,0,0,600);
bkgdgrd.addColorStop(0,"rgba(0,104,255,1)"); //0 is starting color
bkgdgrd.addColorStop(0.2,"rgba(0,168,255,0.5)");
bkgdgrd.addColorStop(0.4,"rgba(0,227,255,1)");
bkgdgrd.addColorStop(0.6,"rgba(0,244,255,.5)");
bkgdgrd.addColorStop(0.8,"rgba(0,227,255,.25)");
bkgdgrd.addColorStop(1,"rgba(255,227,0,1)"); //1 is ending color

///BACKGROUND

context.beginPath();
context.rect(0,0,800,600);
context.closePath();
context.fillStyle = bkgdgrd;
context.fill();


///BIRD
context.beginPath();
context.moveTo(75,125);
context.quadraticCurveTo(50,50,165,85)
context.quadraticCurveTo(185,0,300,70)
context.strokeStyle = "black"
context.lineWidth = 2
context.stroke();

///LEFT TRUNK

var trunk = context.createLinearGradient(250,200,0,600);
trunk.addColorStop(0,"rgba(134,117,91,1)");
trunk.addColorStop(.5,"rgba(134,94,70,1)");
trunk.addColorStop(1,"rgba(134,83,45,1)");
context.beginPath();
context.beginPath();

context.moveTo(200,250);
context.bezierCurveTo(140,250,20,600,20,600);
context.lineTo(75,600);
context.bezierCurveTo(45,600,180,250,200,250);
context.strokeStyle = trunk
context.stroke();
context.fillStyle = trunk
context.fill();

///RIGHT TRUNK
context.beginPath();

context.moveTo(600,250);
context.bezierCurveTo(690,250,765,600,850,600);
context.lineTo(760,600);
context.bezierCurveTo(775,600,635,250,600,250);
context.strokeStyle = trunk;
context.stroke();
context.fillStyle = trunk;
context.fill();

///LEAF COLORS
var leaf = context.createLinearGradient(100,200,400,400);
leaf.addColorStop(0,"rgba(0,66,0,1)");
leaf.addColorStop(.25,"rgba(0,85,0,1)");
leaf.addColorStop(.5,"rgba(0,120,1,1)");
leaf.addColorStop(.75,"rgba(0,150,0,1)");
leaf.addColorStop(1,"rgba(0,180,0,1)")

var leaf2 = context.createLinearGradient(50,200,450,400);
leaf2.addColorStop(0,"rgba(0,180,0,1)");
leaf2.addColorStop(.25,"rgba(0,150,0,1)");
leaf2.addColorStop(.5,"rgba(0,120,1,1)");
leaf2.addColorStop(.75,"rgba(0,85,0,1)");
leaf2.addColorStop(1,"rgba(0,66,0,1)")

///LEFT LEAF 1
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(35,135,65,325);
context.quadraticCurveTo(120,200,200,250)
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///LEFT LEAF 2
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(130,75,40,210);
context.quadraticCurveTo(150,125,200,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///LEFT LEAF 3
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(235,35,375,150);
context.quadraticCurveTo(250,125,200,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///LEFT LEAF 4
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(325,95,370,275);
context.quadraticCurveTo(260,150,200,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///LEFT LEAF 5
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(450,250,250,380);
context.quadraticCurveTo(285,255,200,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///LEFT LEAF A


context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(25,250,160,400);
context.quadraticCurveTo(100,300,200,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf2
context.fill();

///LEFT LEAF B
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(70,100,30,300);
context.quadraticCurveTo(100,185,200,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf2
context.fill();

///LEFT LEAF C
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(240,100,75,110);
context.quadraticCurveTo(230,235,200,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf2
context.fill();

///LEFT LEAF D
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(275,165,415,300);
context.quadraticCurveTo(300,225,200,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf2
context.fill();

///LEFT LEAF E
context.beginPath();
context.moveTo(200,250);
context.quadraticCurveTo(365,235,375,375);
context.quadraticCurveTo(335,275,200,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf2
context.fill();


///RIGHT LEAF COLORS
var leaf = context.createLinearGradient(450,200,800,400);
leaf.addColorStop(0,"rgba(0,66,0,1)");
leaf.addColorStop(.25,"rgba(0,125,0,1)");
leaf.addColorStop(.5,"rgba(0,150,1,1)");
leaf.addColorStop(.75,"rgba(0,180,0,1)");
leaf.addColorStop(1,"rgba(0,200,0,1)")

var leaf2 = context.createLinearGradient(50,200,450,400);
leaf2.addColorStop(0,"rgba(0,200,0,1)");
leaf2.addColorStop(.25,"rgba(0,180,0,1)");
leaf2.addColorStop(.5,"rgba(0,150,1,1)");
leaf2.addColorStop(.75,"rgba(0,125,0,1)");
leaf2.addColorStop(1,"rgba(0,66,0,1)")

///RIGHT LEAF 1
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(450,225,450,350);
context.quadraticCurveTo(475,275,600,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///RIGHT LEAF 2
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(500,75,425,250);
context.quadraticCurveTo(515,175,600,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///RIGHT LEAF 3
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(545,65,700,100);
context.quadraticCurveTo(575,175,600,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///RIGHT LEAF 4
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(685,15,775,295);
context.quadraticCurveTo(675,100,600,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///RIGHT LEAF 5
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(775,155,740,335);
context.quadraticCurveTo(750,200,600,250);
context.strokeStyle = leaf2
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf
context.fill();

///RIGHT LEAF A
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(500,250,550,425);
context.quadraticCurveTo(535,265,600,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf2
context.fill();

///RIGHT LEAF B
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(475,175,420,330);
context.quadraticCurveTo(480,225,600,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf2
context.fill();

///RIGHT LEAF C
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(500,75,600,100);
context.quadraticCurveTo(550,50,600,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillStyle = leaf2
context.fill();

///RIGHT LEAF D
context.beginPath();
context.moveTo(600,250);
context.quadraticCurveTo(750,225,775,300);
context.quadraticCurveTo(750,275,600,250);
context.strokeStyle = leaf
context.lineWidth = 8
context.stroke();
context.fillstyle = leaf2
context.fill();

///WOMANS HEAD
 context.beginPath();
      context.arc(575,450,32, 0, 2 * Math.PI, false);
      context.fillStyle = "tan";
      context.fill();
   


///HAMMOCK
var ham = context.createLinearGradient(115,425,660,425);
ham.addColorStop(0,"rgba(255,91,40,1)");
ham.addColorStop(0.25,"rgba(255,132,40,1)");
ham.addColorStop(0.75,"rgba(255,161,104,1)");
ham.addColorStop(1,"rgba(255,185,176,1)");

context.beginPath();
context.moveTo(115,425);
context.quadraticCurveTo(375,600,660,425);
context.quadraticCurveTo(375,700,115,425);
context.strokeStyle = ham
context.lineWidth = 8
context.stroke();
context.fillStyle = ham
context.fill();

///HAMMOCK STRAP 1
context.beginPath();
context.moveTo(120,430);
context.lineTo(100,400);
context.strokeStyle = "black"
context.lineWidth = 2
context.stroke();

///HAMMOCK STRAP 2
context.beginPath();
context.moveTo(660,425);
context.lineTo(710,390);
context.strokeStyle = "black"
context.lineWidth = 2
context.stroke();

///LEFT COCONUT 1
      context.beginPath();
      context.arc(225,250,15, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(134,100,0,1)"
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "black";
      context.stroke();

///LEFT COCONUT 2
context.beginPath();
      context.arc(200,250,15, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(134,80,21,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "black";
      context.stroke();

///LEFT COCONUT 3
 context.beginPath();
      context.arc(210,225,15, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(134,100,0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "black";
      context.stroke();

///RIGHT COCONUT A
context.beginPath();
      context.arc(595,250,15, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(134,80,21,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "black";
      context.stroke();

///RIGHT COCONUT B
 context.beginPath();
      context.arc(615,250,15, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(134,100,0,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "black";
      context.stroke();

///RIGHT COCONUT C
 context.beginPath();
      context.arc(610,225,15, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(134,80,21,1)";
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = "black";
      context.stroke();




///HAIR STRAND 1
var hair = context.createLinearGradient(555,435,600,545);
hair.addColorStop(0,"rgba(236,223,121,1)")
hair.addColorStop(1,"rgba(134,123,40,1)")
context.beginPath();
context.moveTo(555,435);
context.lineTo(555,505);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 2
context.beginPath();
context.moveTo(560,435);
context.lineTo(560,510);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 3
context.beginPath();
context.moveTo(565,435);
context.lineTo(565,515);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 4
context.beginPath();
context.moveTo(570,435);
context.lineTo(570,520);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 5
context.beginPath();
context.moveTo(575,435);
context.lineTo(575,525);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 6
context.beginPath();
context.moveTo(580,435);
context.lineTo(580,530);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 7
context.beginPath();
context.moveTo(585,435);
context.lineTo(585,535);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 8
context.beginPath();
context.moveTo(590,435);
context.lineTo(590,540);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 9
context.beginPath();
context.moveTo(595,435);
context.lineTo(595,545);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAIR STRAND 10
context.beginPath();
context.moveTo(600,435);
context.lineTo(600,545);
context.strokeStyle = hair
context.lineWidth = 5
context.stroke();

///HAT
var hat = context.createLinearGradient(550,425,600,475)
hat.addColorStop(0,"rgba(172,132,227,1)");
hat.addColorStop(1,"rgba(157,59,194,1)");

      context.beginPath();
      context.arc(575, 450, 30, 0, 1.2*Math.PI, true);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = hat
      context.fill();
      context.strokeStyle = hat
context.lineWidth = 2
      context.stroke();

/////HAT RIM
context.beginPath();
context.moveTo(620,455);
context.lineTo(535,430);
context.strokeStyle = hat;
context.stroke();

/////EYE
context.beginPath();
context.moveTo(570,455);
context.lineTo(545,445);
context.strokeStyle = "black";
context.lineWidth = 3
context.stroke();


///SUNGLASS

      context.beginPath();
      context.arc(531, 440, 15, 0, .3*Math.PI, false);
      context.closePath();
      context.lineWidth = 2;
      context.fillStyle = "black";
      context.fill();
      context.strokeStyle = "black";
      context.stroke();

///SUN
var sun = context.createRadialGradient(350, 50, 10, 238, 50, 300)
sun.addColorStop(0,"yellow")
sun.addColorStop(1,"orange")

context.beginPath();
context.arc(425,100,55, 0, 2 * Math.PI, false);
    context.fillStyle = sun
    context.fill();



///BIRD 2
context.beginPath();
context.moveTo(625,100);
context.quadraticCurveTo(670,50,725,100);
context.quadraticCurveTo(750,40,800,75);
context.strokeStyle = "black"
context.stroke();