CANVAS PROJECT

I created this image entirely by coding using Adobe Dreamweaver. It took forever, but I weirdly enjoy coding and love how the final product came out. The code can be found below.

// BACKGROUND

var grd = context.createLinearGradient(200,200,200,400);

grd.addColorStop(0, "rgba(51,153,153,1)"); // STARTING COLOR

grd.addColorStop(.25, "yellow");

grd.addColorStop(1, "rgba(135,226,226,1)"); // ENDING COLOR

context.beginPath();

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

context.fillStyle = grd;

context.fill();

context.strokeStyle = "rgba(0,0,0,1)";

context.stroke();

context.closePath();

// LEFT WING

context.beginPath();

context.moveTo(355,210);

context.quadraticCurveTo(180,300,343,380);

context.quadraticCurveTo(400,250,355,210);

context.fillStyle = "rgba(0,0,0,1)";

context.fill();

context.stroke();

context.closePath();

// TORSO

context.beginPath();

context.moveTo(360,210)

context.quadraticCurveTo(205,370,400,420);

context.quadraticCurveTo(400,420,425,395);

context.quadraticCurveTo(500,300,430,210);

context.fillStyle = "rgba(287,185,184,1)";

context.fill();

context.lineWidth = 2;

context.stroke();

context.closePath();

// RIGHT WING

context.beginPath();

context.moveTo(435,210)

context.quadraticCurveTo(310,320,435,400);

context.quadraticCurveTo(540,320,435,213);

context.fillStyle = "rgba(0,0,0,1)";

context.fill();

context.stroke();

context.closePath();

// LEFT SIDE OF HEAD

context.beginPath();

context.arc(317,163,43,.49*Math.PI,0.1*Math.PI,false);

context.fillStyle = "rgba(0,0,0,1)";

context.fill();

context.stroke();

context.closePath();

// RIGHT SIDE OF HEAD

context.beginPath();

context.arc(427,167,43,.5*Math.PI,.75*Math.PI,true);

context.fillStyle = "rgba(0,0,0,1)";

context.fill();

context.stroke();

context.closePath();

// HEAD

context.beginPath();

context.moveTo(285,95);

context.quadraticCurveTo(370,130,465,95);

context.lineWidth = 4;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(285,95);

context.lineTo(370,160);

context.lineWidth = 4;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(465,95);

context.lineTo(370,160);

context.lineWidth = 4;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(305,101);

context.lineTo(305,110);

context.lineWidth = 5;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(300,100);

context.lineTo(300,107);

context.lineWidth = 5;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(293,99);

context.lineTo(297,103);

context.lineWidth = 5;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(310,104);

context.lineTo(310,114);

context.lineWidth = 4;

context.strokeStyle = "hotpink";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(315,105);

context.lineTo(315,119);

context.lineWidth = 4;

context.strokeStyle = "yellow";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(320,106);

context.lineTo(320,124);

context.lineWidth = 4;

context.strokeStyle = "blue";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(325,107);

context.lineTo(325,126);

context.lineWidth = 5;

context.strokeStyle = "lightgreen";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(330,108);

context.lineTo(330,128);

context.lineWidth = 5;

context.strokeStyle = "purple";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(335,109);

context.lineTo(335,131);

context.lineWidth = 5;

context.strokeStyle = "hotpink";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(340,110);

context.lineTo(340,135);

context.lineWidth = 5;

context.strokeStyle = "yellow";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(345,111);

context.lineTo(345,140);

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(350,112);

context.lineTo(350,145);

context.lineWidth = 5;

context.strokeStyle = "lightgreen";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(355,113);

context.lineTo(355,150);

context.lineWidth = 5;

context.strokeStyle = "purple";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(360,113);

context.lineTo(360,155);

context.lineWidth = 5;

context.strokeStyle = "hotpink";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(365,114);

context.lineTo(365,160);

context.lineWidth = 5;

context.strokeStyle = "yellow";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(370,114);

context.lineTo(370,164);

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(375,114);

context.lineTo(375,167);

context.lineWidth = 5;

context.strokeStyle = "lightgreen";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(380,113);

context.lineTo(380,166);

context.lineWidth = 5;

context.strokeStyle = "purple";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(385,113);

context.lineTo(385,163);

context.lineWidth = 5;

context.strokeStyle = "hotpink";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(390,113);

context.lineTo(390,159);

context.lineWidth = 5;

context.strokeStyle = "yellow";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(395,112);

context.lineTo(395,155);

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(400,111);

context.lineTo(400,150);

context.lineWidth = 5;

context.strokeStyle = "lightgreen";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(405,109);

context.lineTo(405,136);

context.lineWidth = 5;

context.strokeStyle = "purple";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(410,109);

context.lineTo(410,132);

context.lineWidth = 5;

context.strokeStyle = "hotpink";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(415,109);

context.lineTo(415,129);

context.lineWidth = 5;

context.strokeStyle = "yellow";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(420,109);

context.lineTo(420,125);

context.lineWidth = 4;

context.strokeStyle = "blue";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(425,108);

context.lineTo(425,121);

context.lineWidth = 4;

context.strokeStyle = "lightgreen";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(430,107);

context.lineTo(430,117);

context.lineWidth = 4;

context.strokeStyle = "purple";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(435,106);

context.lineTo(435,114);

context.lineWidth = 5;

context.strokeStyle = "hotpink";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(440,104);

context.lineTo(440,112);

context.lineWidth = 5;

context.strokeStyle = "rgba(0,0,0,1)";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(445,101);

context.lineTo(445,109);

context.lineWidth = 5;

context.strokeStyle = "rgba(0,0,0,1)";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(445,103);

context.lineTo(460,98);

context.lineWidth = 4;

context.strokeStyle = "rgba(0,0,0,1)";

context.stroke();

context.closePath();

// NOSE

context.beginPath();

context.moveTo(350,195);

context.lineTo(390,200);

context.lineTo(370,225);

context.lineTo(350,200);

context.lineWidth = 3;

context.strokeStyle = "rgba(0,0,0,1)";

context.fillStyle = "rgba(255,153,51,1)";

context.fill();

context.stroke();

context.closePath();

// RIGHT EYE

context.beginPath();

context.arc(410,180,40,0*Math.PI,2*Math.PI,false);

context.lineWidth = 3;

context.fillStyle = "rgba(124,242,242,1)";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(411,182,25,0*Math.PI,2*Math.PI,false);

context.fillStyle = "rgba(255,255,0,.5)";

context.lineWidth = 2;

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(412,182,12,0*Math.PI,2*Math.PI,false);

context.fillStyle = "rgba(0,0,0,1)";

context.fill();

context.closePath();

// LEFT EYE

context.beginPath();

context.arc(330,180,40,0*Math.PI,2*Math.PI,false);

context.lineWidth = 3;

context.fillStyle = "rgba(124,242,242,1)";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(331,182,25,0*Math.PI,2*Math.PI,false);

context.fillStyle = "rgba(255,255,0,.5)";

context.lineWidth = 2;

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(332,182,12,0*Math.PI,2*Math.PI,false);

context.fillStyle = "rgba(0,0,0,1)";

context.fill();

context.closePath();

// BRANCH

context.beginPath();

context.rect(220,370,800,10);

context.lineWidth = 5;

context.strokeStyle = "rgba(84,54,36,1)";

context.fillStyle = "rgba(84,54,36,1)";

context.fill();

context.stroke();

context.closePath();

// FIRST LEAF

context.beginPath();

context.arc(550, 383, 10, 0, Math.PI, false);

context.closePath();

context.lineWidth = 3;

context.fillStyle = "green";

context.fill();

context.closePath();

// SECOND LEAF

context.beginPath();

context.arc(670, 383, 10, 0, Math.PI, false);

context.closePath();

context.lineWidth = 2;

context.fillStyle = "green";

context.fill();

context.closePath();

// THIRD LEAF

context.beginPath();

context.arc(250, 383, 10, 0, Math.PI, false);

context.closePath();

context.lineWidth = 3;

context.fillStyle = "green";

context.fill();

context.closePath();

// LEFT FOOT

context.beginPath();

context.moveTo(320,370);

context.bezierCurveTo(310,380,300,390,320,400);

context.bezierCurveTo(318,388,308,398,320,370);

context.lineWidth = 2;

context.fillStyle = "rgba(255,153,51,1)";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(330,370);

context.bezierCurveTo(320,380,310,390,330,400);

context.bezierCurveTo(328,388,318,398,330,370);

context.fillStyle = "rgba(255,153,51,1)";

context.fill();

context.lineWidth = 2;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(340,370);

context.bezierCurveTo(330,380,320,390,340,400);

context.bezierCurveTo(338,388,328,398,340,370);

context.fillStyle = "rgba(255,153,51,1)";

context.fill();

context.lineWidth = 2;

context.stroke();

context.closePath();

// RIGHT FOOT

context.beginPath();

context.moveTo(380,370);

context.bezierCurveTo(370,380,360,390,380,400);

context.bezierCurveTo(378,388,368,398,380,370);

context.fillStyle = "rgba(255,153,51,1)";

context.fill();

context.lineWidth = 2;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(390,370);

context.bezierCurveTo(380,380,370,390,390,400);

context.bezierCurveTo(388,388,378,398,390,370);

context.fillStyle = "rgba(255,153,51,1)";

context.fill();

context.lineWidth = 2;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(400,370);

context.bezierCurveTo(390,380,380,390,400,400);

context.bezierCurveTo(398,388,388,398,400,370);

context.fillStyle = "rgba(255,153,51,1)";

context.fill();

context.lineWidth = 2;

context.stroke();

context.closePath();