Canvas Final Project

For my final project on Dreamweaver, I decided to create a futuristic city that finally cares about light pollution and has switched to all-red bulbs to combat it. There is also a flying car that reflects the light in the same way the buildings do, and shows the grass/sky in its windows. Dreamweaver is very complicated but I am glad that I was able to understand everything that goes on when I draw a simple line in Illustrator.


My Code:

var bkgdgrd=context.createLinearGradient(0,0,0,600);
bkgdgrd.addColorStop(0.1,"rgba(7,219,212,1.00)");
bkgdgrd.addColorStop(0.3,"rgba(7,194,219,1.00)");
bkgdgrd.addColorStop(0.4,"rgba(7,162,219,1.00)");
bkgdgrd.addColorStop(0.5,"rgba(7,132,222,1.00)");
bkgdgrd.addColorStop(0.8,"rgba(7,107,232,1.00)");
bkgdgrd.addColorStop(1,"rgba(0,152,17,1.00)");
var silvergrd=context.createLinearGradient(0,0,0,600) ;
silvergrd.addColorStop(0, "rgba(222,226,248,1.00)");
silvergrd.addColorStop(.3, "rgba(227,231,255,1.00)");
silvergrd.addColorStop(.5, "rgba(184,187,206,1.00)");
silvergrd.addColorStop(.7, "rgba(138,139,149,1.00)");
silvergrd.addColorStop(.9, "rgba(184,187,206,1.00)");
silvergrd.addColorStop(1, "rgba(150,150,150,1.00)");



//bkgd
context.beginPath();
context.rect(0,0, canvas.width, canvas.height);
context.closePath();
context.fillStyle = bkgdgrd;
context.fill();

//needle
context.beginPath();
context.moveTo(125,590);
context.quadraticCurveTo(165,475,175,105);
context.quadraticCurveTo(185,475,225,590);
context.closePath();
context.fillStyle=silvergrd;
context.fill();
context.stroke();

//building
context.beginPath();
context.moveTo(220,685);
context.lineTo(220,360);
context.lineTo(245,335);
context.lineTo(345,335);
context.lineTo(370,360);
context.lineTo(370,685);
context.closePath();
context.fillStyle=silvergrd;
context.fill();
context.stroke();

//sbuilding
context.beginPath();
context.moveTo(550,500);
context.quadraticCurveTo(650,425,750,500);
context.moveTo(550,500);

context.lineTo(550,700);
context.lineTo(750,700);
context.lineTo(750,500);
/*context.lineTo(345,335);
context.lineTo(370,360);
context.lineTo(370,685);
context.closePath();*/
context.fillStyle=silvergrd;
context.fill();

context.stroke();


//sbuildingwindows
context.beginPath();
context.rect(570,520,50,50);
context.rect(570,590,50,50);
context.rect(680,520,50,50);
context.rect(680,590,50,50);
context.closePath();
context.fillStyle=("rgba(255,119,119,1.00)");
context.fill();
context.stroke();


//windowsL
context.beginPath();
context.rect(235,355,50,50);
context.rect(235,425,50,50);
context.rect(235,495,50,50);
context.rect(235,565,50,50);
//windowsR
context.rect(305,355,50,50);
context.rect(305,425,50,50);
context.rect(305,495,50,50);
context.rect(305,565,50,50);

context.closePath();
context.fillStyle=("rgba(255,119,119,1.00)");
context.fill();
context.stroke();





//needle oval
context.beginPath();
context.moveTo(100,250);
context.quadraticCurveTo(180,150, 260,250);
context.quadraticCurveTo(180,350, 100, 250);
context.closePath();
context.fillStyle=silvergrd;
context.fill();
context.stroke();

//oval window
context.beginPath();
context.moveTo(110,250);
context.bezierCurveTo(135,225,225,225,250,250);
context.bezierCurveTo(225,275,135,275,110,250);
context.closePath();
context.fillStyle=("rgba(255,119,119,1.00)");
context.fill();
context.stroke();

//car
context.beginPath();
context.moveTo(mouseX,mouseY);
context.lineTo(mouseX+30,mouseY);
context.lineTo(mouseX+60,mouseY-30);
context.lineTo(mouseX+135,mouseY-30);
context.lineTo(mouseX+150,mouseY);
context.lineTo(mouseX+170,mouseY);
context.lineTo(mouseX+170,mouseY+40);
context.lineTo(mouseX,mouseY+40);

context.lineTo(mouseX,mouseY);
context.lineTo(mouseX,mouseY);
context.closePath();
context.fillStyle=silvergrd;
context.fill();
context.stroke();

//car windows
context.beginPath();
context.moveTo(mouseX+35,mouseY)
context.lineTo(mouseX+60,mouseY-25);
context.lineTo(mouseX+130,mouseY-25);
context.lineTo(mouseX+145,mouseY);
/*context.lineTo(mouseX,mouseY);
context.lineTo(mouseX,mouseY);
context.lineTo(mouseX,mouseY);
context.lineTo(mouseX,mouseY);
context.lineTo(mouseX,mouseY);
context.lineTo(mouseX,mouseY);
context.lineTo(mouseX,mouseY);*/
context.closePath();
context.fillStyle=bkgdgrd;
context.fill();
context.stroke();

//cardoor
context.beginPath();
context.moveTo(mouseX+100,mouseY-30);
context.lineTo(mouseX+100,mouseY+40);
context.closePath();
context.stroke();

//wheels


context. beginPath();
context.arc(mouseX+30,mouseY+40, 15,0*Math.PI, 2*Math.PI,false);
context.closePath();
context.stroke();
context.fillStyle= "black";
context.fill();

context.beginPath();
context.arc(mouseX+145,mouseY+40, 15,0*Math.PI, 2*Math.PI,false);
context.closePath();
context.stroke();
context.fillStyle= "black";
context.fill();