Canvas Final

      So here is my final piece after much time and hard work on it. It is simple but effective!

context.rect(0, 0, 800, 350);
      // add linear gradient
      var grd = context.createLinearGradient(0, 0, 800, 350);
      // light blue
      grd.addColorStop(1, '#8ED6FF');
      // dark blue
      grd.addColorStop(0, '#004CB3');
      context.fillStyle = grd;
      context.fill();

context.beginPath();
//telling dw we are creating a closed shape

context.moveTo(350,50);
//this tells dw the starting point of a shape

context.lineTo(100,150);
//termination of the first line

context.lineTo(600, 150);
//creates a second line

context.closePath();
//draws the closed shape (this is all about drawing by numbers)
context.fillStyle = 'brown';
      context.fill();
context.lineWidth = 7;
 context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
      context.rect(0, 350, 800, 350);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'green';
      context.stroke();

      context.beginPath();
      context.rect(188, 150, 325, 300);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'brown';
      context.stroke();

      context.beginPath();
      context.rect(225, 275, 100, 170);
      context.fillStyle = 'brown';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'brown';
      context.stroke();

      context.beginPath();
      context.rect(350, 275, 50, 50);
      context.fillStyle = 'brown';
      context.fill();

      context.beginPath();
      context.rect(410, 275, 50, 50);
      context.fillStyle = 'brown';
      context.fill();

      context.beginPath();
      context.rect(350, 335, 50, 50);
      context.fillStyle = 'brown';
      context.fill();

      context.beginPath();
      context.rect(410, 335, 50, 50);
      context.fillStyle = 'brown';
      context.fill();

      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 10;

      context.beginPath();
      context.arc(300, 355, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();

      context.beginPath();
      context.lineWidth = 9;
context.moveTo(650,0);
context.lineTo(800,0);
context.lineTo(800,150);
context.moveTo(800, 150);
      context.quadraticCurveTo(650, 100, 650, 0);
      // line color
      context.strokeStyle = 'orange';
      context.stroke();
context.closePath();
context.fillStyle = 'orange';
context.fill();

context.beginPath();
      context.moveTo(650, 20);
      context.lineTo(600, 35);
      context.stroke();

context.beginPath();
      context.moveTo(650, 0);
      context.lineTo(590, 0);
      context.stroke();

context.beginPath();
      context.moveTo(660, 50);
      context.lineTo(610, 75);
      context.stroke();

context.beginPath();
      context.moveTo(690, 90);
      context.lineTo(635, 130);
      context.stroke();

context.beginPath();
      context.moveTo(725, 117);
      context.lineTo(685, 165);
      context.stroke();

context.beginPath();
      context.moveTo(765, 135);
      context.lineTo(750, 195);
      context.stroke();

context.beginPath();
      context.moveTo(800, 150);
      context.lineTo(800, 200);
      context.stroke();

  context.beginPath();
      context.moveTo(625, 610);
      context.quadraticCurveTo(650, 350, 640, 325);
      context.lineWidth = 10;
      context.line
      context.moveTo(625, 610);
      context.quadraticCurveTo(650, 350, 640, 325);
      context.lineWidth = 100;

      // line color
      context.strokeStyle = 'rgb(150,78,36)';
      context.stroke();

var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(550, 325, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(600, 300, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(625, 355, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(700, 345, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(675, 305, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();