CANVAS PROJECT

For this project, we learned how to create an image using coding on DreamWeaver. After many, many hours, this is what I came up with. 

//START:
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(300, 0, 300, 500);
grd.addColorStop(0, "rgba(9,32,87,0.5)");
grd.addColorStop(.5, "rgba(154,219,245,1)");
grd.addColorStop(1, "rgba(13,52,92,1)");


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

context.closePath();

context.beginPath();
context.moveTo(30,30);
context.quadraticCurveTo(100,0,350,300);
context.quadraticCurveTo(-50,400,30,30);
context.strokeStyle = "rgba(70,4,94,1)";
context.lineWidth = 10;
context.fillStyle = "rgba(141,51,153,1)";
context.fill();
context.stroke();

context.closePath(); 


context.beginPath();
context.moveTo(20,400);
context.quadraticCurveTo(200,700,350,300);
context.quadraticCurveTo(350,250,20,400);
context.fillStyle = "rgba(141,51,153,1)";
context.fill();
context.stroke();
 
context.closePath();

var rdg = context.createRadialGradient(400,300,20,400,300,300);
rdg.addColorStop(0, "black");


context.beginPath();
context.moveTo(425,320);
context.quadraticCurveTo(300,290,770,30);
context.quadraticCurveTo(850,360,425,320);
context.fillStyle = "rgba(141,51,153,1)";
context.fill();
context.stroke();

context.closePath(); 


context.beginPath();
context.moveTo(400,300);
context.quadraticCurveTo(400,670,750,450);
context.quadraticCurveTo(430,250,400,300);
context.fillStyle = "rgba(141,51,153,1)";
context.fill();
context.stroke();

context.closePath();

context.beginPath();
context.moveTo(400,360);
context.bezierCurveTo(650,175,250,650,730,450);
context.strokeStyle = "rgba(176,201,209,1)";
context.lineWidth = 10;
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(100,490);
context.bezierCurveTo(250,120,60,650,350,295);
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.arc(370,500,40,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.fillStyle = "rgba(135,255,153,0.5)";
context.fill();
context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.arc(370,450,40,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.fillStyle ="rgba(135,255,153,0.5)";
context.fill();
context.stroke();

context.closePath();


context.beginPath();

context.arc(370,400,40,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.fillStyle = "rgba(135,255,153,0.5)";
context.fill();
context.stroke();

context.closePath();
 
context.beginPath();

context.arc(370,350,40,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.fillStyle = "rgba(135,255,153,0.5)";
context.fill();
context.stroke();

context.closePath();
  
context.beginPath();

context.arc(370,300,40,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.fillStyle = "rgba(135,255,153,0.5)";
context.fill();
context.stroke();

context.closePath();
 
context.beginPath();

context.arc(370,250,40,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.fillStyle = "rgba(135,255,153,0.5)";
context.fill();
context.stroke();

context.closePath();
  
context.beginPath();

context.arc(370,200,40,0*Math.PI,2*Math.PI,false);
context.lineWidth = 5;
context.fillStyle = "rgba(135,255,153,1)";
context.fill();
context.stroke();

context.closePath();

context.beginPath();

context.beginPath();

context.arc(400,110,60,0.1*Math.PI,0.5*Math.PI,false);
context.lineWidth = 5;
context.strokeStyle = "rgba(76,25,73,1)";
context.stroke();

context.closePath();

context.beginPath();

context.arc(340,110,60,0.5*Math.PI,0.9*Math.PI,false);
context.lineWidth = 5;
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(50,50);
context.lineTo(50,70);
context.lineTo(60,70);
context.lineTo(50,50)

context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(40,70);
context.lineTo(30,90);
context.lineTo(50,90);
context.lineTo(40,70)

context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(70,80);
context.lineTo(50,100);
context.lineTo(70,100);
context.lineTo(70,80)

context.strokeStyle = "rgba(70,4,94,1)"
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(40,100);
context.lineTo(40,120);
context.lineTo(70,120);
context.lineTo(40,100)

context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(40,150);
context.lineTo(30,130);
context.lineTo(50,130);
context.lineTo(40,150)

context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(60,150);
context.lineTo(60,135);
context.lineTo(80,135);
context.lineTo(60,150)

context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(30,180);
context.lineTo(30,160);
context.lineTo(60,160);
context.lineTo(30,180)

context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();

context.closePath();

context.beginPath();

context.moveTo(70,160);
context.lineTo(70,180);
context.lineTo(100,180);
context.lineTo(70,160)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(40,180);
context.lineTo(40,210);
context.lineTo(60,200);
context.lineTo(40,180)

context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();
 
context.beginPath();

context.moveTo(70,190);
context.lineTo(70,210);
context.lineTo(100,200);
context.lineTo(70,190)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();
  
context.beginPath();

context.moveTo(40,240);
context.lineTo(40,220);
context.lineTo(70,220);
context.lineTo(40,240)

context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(85,240);
context.lineTo(85,225);
context.lineTo(95,230);
context.lineTo(85,240)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(60,270);
context.lineTo(60,240);
context.lineTo(75,245);
context.lineTo(60,270)

context.strokeStyle = "rgba(70,4,94,1)";

context.stroke();

context.closePath(); 

context.beginPath();

context.moveTo(130,220);
context.lineTo(130,205);
context.lineTo(110,215);
context.lineTo(130,220)

context.strokeStyle = "rgba(176,201,209,1)";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(90,280);
context.lineTo(90,250);
context.lineTo(110,240);
context.lineTo(90,280)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();  

context.beginPath();

context.moveTo(110,300);
context.lineTo(110,260);
context.lineTo(140,280);
context.lineTo(110,300)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath(); 

context.beginPath();

context.moveTo(120,265);
context.lineTo(120,230);
context.lineTo(160,230);
context.lineTo(120,265)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath(); 
 
context.beginPath();

context.moveTo(160,300);
context.lineTo(170,250);
context.lineTo(150,245);
context.lineTo(160,300)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath(); 

context.beginPath();

context.moveTo(160,315);
context.lineTo(150,290);
context.lineTo(130,295);
context.lineTo(160,315)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath(); 

context.beginPath();

context.moveTo(200,315);
context.lineTo(190,260);
context.lineTo(170,295);
context.lineTo(200,315)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(240,310);
context.lineTo(230,240);
context.lineTo(190,250);
context.lineTo(240,310)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(220,310);
context.lineTo(220,290);
context.lineTo(200,290);
context.lineTo(220,310)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(250,300);
context.lineTo(305,290);
context.lineTo(250,240);
context.lineTo(250,300)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(290,270);
context.lineTo(320,280);
context.lineTo(290,240);
context.lineTo(290,270)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(480,270);
context.lineTo(420,280);
context.lineTo(450,240);
context.lineTo(480,270)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(520,315);
context.lineTo(460,290);
context.lineTo(490,250);
context.lineTo(520,315)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(560,310);
context.lineTo(540,260);
context.lineTo(530,310);
context.lineTo(560,310)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(520,290);
context.lineTo(520,245);
context.lineTo(510,250);
context.lineTo(520,290)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(520,290);
context.lineTo(520,245);
context.lineTo(510,250);
context.lineTo(520,290)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(580,290);
context.lineTo(580,245);
context.lineTo(550,250);
context.lineTo(580,290)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(590,315);
context.lineTo(590,300);
context.lineTo(570,300);
context.lineTo(590,315)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(620,315);
context.lineTo(620,280);
context.lineTo(600,280);
context.lineTo(620,315)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(590,280);
context.lineTo(620,240);
context.lineTo(600,240);
context.lineTo(590,280)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(650,300);
context.lineTo(650,260);
context.lineTo(620,260);
context.lineTo(650,300)

context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(670,270);
context.lineTo(670,230);
context.lineTo(635,240);
context.lineTo(670,270)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(680,290);
context.lineTo(680,250);
context.lineTo(710,260);
context.lineTo(680,290)
context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(680,240);
context.lineTo(680,220);
context.lineTo(700,230);
context.lineTo(680,240)
context.strokeStyle = "rgba(176,201,209,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(710,250);
context.lineTo(710,210);
context.lineTo(735,250);
context.lineTo(710,250)
context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(750,230);
context.lineTo(750,200);
context.lineTo(735,220);
context.lineTo(750,230)
context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(730,210);
context.lineTo(750,180);
context.lineTo(715,200);
context.lineTo(730,210)
context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(770,160);
context.lineTo(725,160);
context.lineTo(720,190);
context.lineTo(770,160)
context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(770,180);
context.lineTo(755,180);
context.lineTo(760,200);
context.lineTo(770,180)
context.strokeStyle = "rgba(70,4,94,1)";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(770,120);
context.lineTo(755,120);
context.lineTo(760,150);
context.lineTo(770,120)
context.strokeStyle = "rgba(70,4,94,1))";
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(725,150);
context.lineTo(750,150);
context.lineTo(740,120);
context.lineTo(725,150)

context.strokeStyle = "rgba(70,4,94,1)"
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(780,90);
context.lineTo(775,110);
context.lineTo(750,110);
context.lineTo(780,90)

context.strokeStyle = "rgba(70,4,94,1)"
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(750,80);
context.lineTo(765,90);
context.lineTo(740,100);
context.lineTo(750,80)

context.strokeStyle = "rgba(70,4,94,1)"
context.stroke();
context.closePath();

context.beginPath();

context.moveTo(760,50);
context.lineTo(770,70);
context.lineTo(760,80);
context.lineTo(760,50)

context.strokeStyle = "rgba(70,4,94,1)"
context.stroke();
context.closePath();

context.beginPath();

context.rect(355,170,5,20);
context.fillStyle = "rgba(12,35,107,1)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "rgb(12,35,107,1)";
context.stroke();

context.closePath();

context.beginPath();

context.rect(375,170,5,20);
context.fillStyle = "rgba(12,35,107,1)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "rgb(12,35,107,1)";
context.stroke();

context.closePath();
//END