Canvas Final - Godzilla

var bkgdgrd = context.createLinearGradient(0,0,0,600);

bkgdgrd.addColorStop(0,"black");
bkgdgrd.addColorStop(0.50,"red");

var rectgrd = context.createLinearGradient(200,200,600,100);

rectgrd.addColorStop(0,"white");
rectgrd.addColorStop(1,"#083264");

var banana = context.createRadialGradient(450,350,0,550,300,250);
banana.addColorStop(0,"#4F8022");
banana.addColorStop(1,"#264106");


// BACKGROUND

context.beginPath();

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

context.closePath();

  context.fillStyle = bkgdgrd;

context.fill();


context.beginPath();
context.rect(700,200,150,300);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "white";
context.stroke();


context.beginPath();
context.rect(550,100,150,300);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.rect(400,120,150,300);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.rect(205,165,150,300);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.rect(0,160,150,300);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "white";
context.stroke();


// windows on back buildings

context.beginPath();
context.rect(30,185,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(80,185,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(80,220,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(30,220,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(30,255,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(80,255,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(80,290,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(30,290,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();



// back building middle row

// DRAW RECTANGLE

context.beginPath();
context.rect(668,120,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,160,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,200,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,240,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,280,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,320,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// back building second row


// DRAW RECTANGLE

context.beginPath();
context.rect(625,120,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(575,120,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(575,160,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(625,160,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(625,200,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(575,200,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(575,240,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(625,240,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(575,280,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(625,280,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// fins on neck 1


context.beginPath(); // STARTS A SHAPE

context.moveTo(385,160); // STARTING POINT
context.lineTo(420,160); // NEXT POINT
context.lineTo(415,125); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.strokeStyle = "#08426D";

context.stroke();

context.fillStyle = rectgrd;

context.fill();


// fins on neck 2


context.beginPath(); // STARTS A SHAPE

context.moveTo(370,140); // STARTING POINT
context.lineTo(400,150); // NEXT POINT
context.lineTo(405,115); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.strokeStyle = "#08426D";

context.stroke();

context.fillStyle = rectgrd;

context.fill();



// fins on neck 3


context.beginPath(); // STARTS A SHAPE

context.moveTo(355,120); // STARTING POINT
context.lineTo(380,160); // NEXT POINT
context.lineTo(390,100); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.strokeStyle = "#08426D";

context.stroke();

context.fillStyle = rectgrd;

context.fill();



// fins on neck 4


context.beginPath(); // STARTS A SHAPE

context.moveTo(335,100); // STARTING POINT
context.lineTo(360,150); // NEXT POINT
context.lineTo(375,85); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.strokeStyle = "#08426D";

context.stroke();

context.fillStyle = rectgrd;

context.fill();



// fin 1


context.beginPath(); // STARTS A SHAPE

context.moveTo(430,130); // STARTING POINT
context.lineTo(500,300); // NEXT POINT
context.lineTo(400,180); // NEXT POINT

context.closePath(); // END OF THE SHAPE



context.fillStyle = rectgrd;

context.fill();

context.strokeStyle = "#08426D";
context.stroke();



// fin 2
context.beginPath(); // STARTS A SHAPE

context.moveTo(475,135); // STARTING POINT
context.lineTo(500,300); // NEXT POINT
context.lineTo(400,180); // NEXT POINT

context.closePath(); // END OF THE SHAPE



context.fillStyle = rectgrd;

context.fill();
context.strokeStyle = "#08426D";
context.stroke();
//  fin 3

context.beginPath(); // STARTS A SHAPE

context.moveTo(610,200); // STARTING POINT
context.lineTo(500,300); // NEXT POINT
context.lineTo(400,180); // NEXT POINT

context.closePath(); // END OF THE SHAPE



context.fillStyle = rectgrd;

context.fill();
context.strokeStyle = "#08426D";
context.stroke();


// fin 4

context.beginPath(); // STARTS A SHAPE

context.moveTo(600,145); // STARTING POINT
context.lineTo(500,300); // NEXT POINT
context.lineTo(400,180); // NEXT POINT

context.closePath(); // END OF THE SHAPE



context.fillStyle = rectgrd;

context.fill();

context.strokeStyle = "#08426D";
context.stroke();


// fin 5


context.beginPath(); // STARTS A SHAPE

context.moveTo(525,140); // STARTING POINT
context.lineTo(500,300); // NEXT POINT
context.lineTo(400,180); // NEXT POINT

context.closePath(); // END OF THE SHAPE



context.fillStyle = rectgrd;

context.fill();
context.strokeStyle = "#08426D";
context.stroke();
// fin 6


context.beginPath(); // STARTS A SHAPE

context.moveTo(650,250); // STARTING POINT
context.lineTo(500,400); // NEXT POINT
context.lineTo(450,250); // NEXT POINT

context.closePath(); // END OF THE SHAPE



context.fillStyle = rectgrd;

context.fill();

context.strokeStyle = "#08426D";
context.stroke();

// fin 7


context.beginPath(); // STARTS A SHAPE

context.moveTo(640,300); // STARTING POINT
context.lineTo(500,400); // NEXT POINT
context.lineTo(450,250); // NEXT POINT

context.closePath(); // END OF THE SHAPE



context.fillStyle = rectgrd;

context.fill();

context.strokeStyle = "#08426D";
context.stroke();

// fin 8



context.beginPath(); // STARTS A SHAPE

context.moveTo(650,345); // STARTING POINT
context.lineTo(450,400); // NEXT POINT
context.lineTo(450,250); // NEXT POINT

context.closePath(); // END OF THE SHAPE



context.fillStyle = rectgrd;

context.fill();

context.strokeStyle = "#08426D";
context.stroke();
// fin 9





var x = canvas.width / 2.0;
      var y = canvas.height / 2.25;
      var radius = 100;
      var startAngle = 0.1 * Math.PI;
      var endAngle = 2 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
   

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
     
context.closePath();
      // line color
   

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



context.beginPath(); // STARTS A SHAPE

context.moveTo(475,200); // STARTING POINT
context.lineTo(475,560); // NEXT POINT
context.lineTo(690,450); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = banana;

context.fill();


context.beginPath(); // STARTS A SHAPE

context.moveTo(290,150); // STARTING POINT
context.lineTo(345,95); // NEXT POINT
context.lineTo(490,225); // NEXT POINT
context.lineTo(310,220); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = banana;

context.fill();
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2.;
      var radius = 140;
      var startAngle = 1.3 * Math.PI;
      var endAngle = 2 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
   

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   
context.closePath();
      // line color
   

context.fillStyle = banana ;
context.fill();
// shoulder



      context.beginPath();
 var x = canvas.width / 2.15;
      var y = canvas.height / 2.5;
      var radius = 40;
      var startAngle = 1.2 * Math.PI;
      var endAngle = 2.5 * Math.PI;
      var counterClockwise = false;    
 context.closePath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      // line color
      context.strokeStyle = "#253913";
      context.stroke();



context.beginPath(); // STARTS A SHAPE

context.moveTo(220,220); // STARTING POINT

context.lineTo(215,260); // NEXT POINT

context.quadraticCurveTo(250, 310, 310, 300);

context.lineTo(295,300); // NEXT POINT


context.lineTo(290,230); // NEXT POINT

context.quadraticCurveTo(250, 210, 220, 220);
context.closePath(); // END OF THE SHAPE

context.fillStyle = banana ;

context.fill();




// DRAW RECTANGLE

context.beginPath();
context.rect(130,95,75,400);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "white";
context.stroke();


context.beginPath(); // STARTS A SHAPE

context.moveTo(130,95); // STARTING POINT
context.lineTo(205,95); // NEXT POINT
context.lineTo(168,40); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.strokeStyle = "white";

context.stroke();

context.fillStyle = "black";

context.fill();


// lgihts on empire building


context.beginPath();
context.rect(140,120,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(175,120,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(140,160,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(175,160,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(140,200,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(175,200,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


context.beginPath();
context.rect(140,240,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(175,240,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


context.beginPath();
context.rect(140,280,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(175,280,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// claw1

context.beginPath(); // STARTS A SHAPE

context.moveTo(215,185); // STARTING POINT
context.lineTo(205,220); // NEXT POINT
context.lineTo(230,220); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "#DEDABA";

context.fill();


// claw2

context.beginPath(); // STARTS A SHAPE

context.moveTo(170,190); // STARTING POINT
context.lineTo(185,220); // NEXT POINT
context.lineTo(220,220); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "#DEDABA";

context.fill();


// claw3

context.beginPath(); // STARTS A SHAPE

context.moveTo(150,225); // STARTING POINT
context.lineTo(180,240); // NEXT POINT
context.lineTo(220,225); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "#DEDABA";

context.fill();

// claw4

context.beginPath(); // STARTS A SHAPE

context.moveTo(160,260); // STARTING POINT
context.lineTo(185,240); // NEXT POINT
context.lineTo(215,250); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "#DEDABA";

context.fill();



// palm

  var x = canvas.width / 3.85;
      var y = canvas.height / 2.55;
      var radius = 30;
      var startAngle = 1 * Math.PI;
      var endAngle = 3 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
   

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   
context.closePath();
      // line color
   

context.fillStyle = "#253913" ;
context.fill();
context.fillStyle = banana ;

context.fill();


// wrist
context.beginPath(); // STARTS A SHAPE

context.moveTo(275,250); // STARTING POINT

context.lineTo(290,300); // NEXT POINT
context.quadraticCurveTo(350, 310, 375, 280);
context.lineTo(375,280); // NEXT POINT

context.lineTo(340,215); // NEXT POINT
context.quadraticCurveTo(290, 210, 275, 250);
context.closePath(); // END OF THE SHAPe

context.fillStyle = banana ;

context.fill();
context.strokeStyle = "#253913";
context.stroke();










// teeth1

context.beginPath(); // STARTS A SHAPE

context.moveTo(222,120); // STARTING POINT
context.lineTo(230,120); // NEXT POINT
context.lineTo(225,130); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "white";

context.fill();

// teeth2


context.beginPath(); // STARTS A SHAPE

context.moveTo(230,120); // STARTING POINT
context.lineTo(250,120); // NEXT POINT
context.lineTo(240,130); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "white";

context.fill();

context.beginPath(); // STARTS A SHAPE

context.moveTo(250,120); // STARTING POINT
context.lineTo(270,120); // NEXT POINT
context.lineTo(260,130); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "white";

context.fill();

// teeth3
context.beginPath(); // STARTS A SHAPE

context.moveTo(270,120); // STARTING POINT
context.lineTo(290,120); // NEXT POINT
context.lineTo(280,130); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "white";

context.fill();


// teeth4


context.beginPath(); // STARTS A SHAPE

context.moveTo(240,140); // STARTING POINT
context.lineTo(247,153); // NEXT POINT
context.lineTo(235,155); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "white";

context.fill();

// teeth5

context.beginPath(); // STARTS A SHAPE

context.moveTo(250,138); // STARTING POINT
context.lineTo(260,153); // NEXT POINT
context.lineTo(245,155); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "white";

context.fill();


// teeth6


context.beginPath(); // STARTS A SHAPE

context.moveTo(260,135); // STARTING POINT
context.lineTo(270,153); // NEXT POINT
context.lineTo(255,155); // NEXT POINT

context.closePath(); // END OF THE SHAPE


context.fillStyle = "white";

context.fill();

// back





// the mouth
var x = canvas.width / 2.8;
      var y = canvas.height / 5;
      var radius = 65;
      var startAngle = 1 * Math.PI;
      var endAngle = 2 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
   

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   
context.closePath();
      // line color
   

context.fillStyle = banana;
context.fill();
var x = canvas.width / 3.5;
      var y = canvas.height / 5.5;
      var radius = 5;
      var startAngle = 1 * Math.PI;
      var endAngle = 3 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
   

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   
context.closePath();
      // line color
   

context.fillStyle = "black" ;
context.fill();

// lower jaw



var x = canvas.width / 2.9;
      var y = canvas.height / 6;
      var radius = 70;
      var startAngle = 2 * Math.PI;
      var endAngle = 0.7 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
   

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   
context.closePath();
      // line color
   

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

// eyes

var x = canvas.width / 2.8;
      var y = canvas.height / 7.5;
      var radius = 15;
      var startAngle = 1.8 * Math.PI;
      var endAngle = 0.8 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
   

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   
context.closePath();
      // line color
   

context.fillStyle = "orange";
context.fill();
context.strokeStyle = "black";
context.stroke();

var x = canvas.width /2.82;
      var y = canvas.height / 6.9;
      var radius = 5;
      var startAngle = 1 * Math.PI;
      var endAngle = 3 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
   

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   
context.closePath();
      // line color

context.fillStyle = "#800800" ;
context.fill();





//context.strokeStyle = "yellow";
//context.stroke();
// DRAW RECTANGLE
// BUILDINGS START

var bldg1 = context.createLinearGradient(2000,350,0,550,300,250);

bldg1.addColorStop(0, "brown");
bldg1.addColorStop(1, "rgba(30,30,30,1)");

context.beginPath();
context.rect(0,345,150,300);
context.closePath();

context.fillStyle = bldg1;
context.fill();
context.strokeStyle = "white";
context.stroke();

// DRAW RECTANGLE

context.beginPath();
context.rect(150,310,150,300);
context.closePath();
context.fillStyle = bldg1;
context.fill();
context.strokeStyle = "white";
context.stroke();
// DRAW RECTANGLE

context.beginPath();
context.rect(300,320,150,300);
context.closePath();
context.fillStyle = bldg1;
context.fill();
context.strokeStyle = "white";
context.stroke();
// DRAW RECTANGLE

context.beginPath();
context.rect(450,300,150,300);
context.closePath();
context.fillStyle = bldg1;
context.fill();
context.strokeStyle = "white";
context.stroke();
// DRAW RECTANGLE

context.beginPath();
context.rect(600,350,150,300);
context.closePath();
context.fillStyle = bldg1;
context.fill();
context.strokeStyle = "white";
context.stroke();
// DRAW RECTANGLE

context.beginPath();
context.rect(750,300,150,300);
context.closePath();
context.fillStyle = bldg1;
context.fill();
context.strokeStyle = "white";
context.stroke();

// windows on first building
// DRAW RECTANGLE

context.beginPath();
context.rect(40,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(90,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(90,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(40,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(40,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(90,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(90,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(40,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// Windows on second building

// DRAW RECTANGLE

// DRAW RECTANGLE

context.beginPath();
context.rect(190,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(250,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();



context.beginPath();
context.rect(190,340,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(250,340,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(250,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(190,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(190,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(250,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(250,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(250,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();
// DRAW RECTANGLE

context.beginPath();
context.rect(190,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// windows on 3rd building

// DRAW RECTANGLE

context.beginPath();
context.rect(325,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(410,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();



context.beginPath();
context.rect(325,340,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(410,340,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(410,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(325,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(325,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(410,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(410,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(325,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(325,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(410,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// 3rd building middle row

// DRAW RECTANGLE

context.beginPath();
context.rect(370,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(370,340,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(370,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


context.beginPath();
context.rect(370,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(370,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(370,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();



// windows on 4th building

// DRAW RECTANGLE

context.beginPath();
context.rect(475,310,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(560,310,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();



context.beginPath();
context.rect(475,380,90,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(560,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();



context.beginPath();
context.rect(475,345,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(560,345,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(560,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(475,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(475,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(560,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(560,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(475,500,90,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(475,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(560,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// 4th building middle row

// DRAW RECTANGLE
context.beginPath();
context.rect(520,310,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


context.beginPath();
context.rect(520,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(520,345,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(520,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


context.beginPath();
context.rect(520,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(520,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

context.beginPath();
context.rect(520,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// windows on 5th building


// DRAW RECTANGLE

context.beginPath();
context.rect(625,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(710,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(710,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(625,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(625,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(710,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(710,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(625,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(710,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// DRAW RECTANGLE

context.beginPath();
context.rect(625,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();


// 5th building middle row

// DRAW RECTANGLE

context.beginPath();
context.rect(668,380,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,420,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,460,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,500,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// DRAW RECTANGLE

context.beginPath();
context.rect(668,540,20,20);
context.closePath();
context.fillStyle = "yellow";
context.fill();

// street

// DRAW RECTANGLE

context.beginPath();
context.rect(0,580,800,35);
context.closePath();
context.fillStyle = "grey";
context.fill();