FIRST CANVAS EVER!!!

This is my first canvas object drawing ever!!!!

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

var background = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 background.addColorStop(0,"blue");

 background.addColorStop(0.25, "pink");

 background.addColorStop(0.5,"yellow");

 background.addColorStop(0.75, "pink");

 background.addColorStop(1,"blue");

 context.rect(0,0, canvas.width, canvas.height);

 context.fillStyle = background;

 context.fill();

 context.closePath();

 var house = context.createLinearGradient(0,0, canvas.width, canvas.height);

 /////  big square of house

 context.beginPath();

 context.moveTo(150,200);

 context.lineTo(450,200);

 context.lineTo(450,600);

 context.lineTo(150,600);

 context.lineTo(150,200);

 context.lineWidth = 10;

 context.strokeStyle = "rgb(0,0,0)"

 context.lineCap = "round";

 context.stroke();

 house.addColorStop(0.25,"blue");

 house.addColorStop(0.5,"pink");

 house.addColorStop(0.75,"yellow");

 context.fillStyle = house;

 context.fill();

 context.closePath();

 ///// Triangle Roof

 var roof = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.moveTo(150,200);

 context.lineTo(300,50);

 context.lineTo(450,200);

 context.lineTo(150,200);

 context.lineWidth = 10;

 context.strokeStyle = "rgb(0,0,0)"

 context.lineCap = "round";

 context.stroke();

 roof.addColorStop(0.25,"rgb(240,16,212)");

 roof.addColorStop(0.5,"rgb(36,240,220)");

 context.fillStyle = roof;

 context.fill();

 context.closePath();

 ////// Door of House

 var door = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.moveTo(250,450);

 context.lineTo(350,450);

 context.lineTo(350,600);

 context.lineTo(250,600);

 context.lineTo(250,450);

 context.lineWidth = 5;

 context.strokeStyle = "rgb(0,0,0)"

 context.stroke();

 door.addColorStop(0.25,"rgb(210,111,104)");

 door.addColorStop(0.5,"rgb(220,230,127)");

 door.addColorStop(1,"rgb(242,86,128)");

 door.addColorStop(0.7,"rgb(46,235,203)");

 context.fillStyle = door;

 context.fill();

 context.closePath();

 ////  first window

 var happy = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.moveTo(175,250);

 context.lineTo(275,250);

 context.lineTo(275,350);

 context.lineTo(175,350);

 context.lineTo(175,250);

 context.lineWidth = 3;

 context.strokeStyle = "rgb(0,0,0)";

 context.stroke();

 happy.addColorStop(0.5,"yellow");

 happy.addColorStop(0.25,"rgb(232,14,87)");

 context.fillStyle = happy;

 context.fill();

 context.closePath();

 ///// window 2

 var happy = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.moveTo(325,250);

 context.lineTo(425,250);

 context.lineTo(425,350);

 context.lineTo(325,350);

 context.lineTo(325,250);

 context.lineWidth = 3;

 context.strokeStyle = "rgb(0,0,0)";

 context.stroke();

 happy.addColorStop(0.3,"yellow");

 happy.addColorStop(0.8,"rgb(232,14,87)");

  context.fillStyle = happy;

 context.fill();

 context.closePath();

 ////attempt at a sun face//

 var sunface = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

  context.arc(650,150,100,0,Math.PI,true);

 context.stroke();

 sunface.addColorStop(0.3,"yellow");

 sunface.addColorStop(0.8,"rgb(232,14,87)");

 context.fillStyle = sunface;

 context.fill();

 context.closePath();

 ////bottom half

 var smile = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.arc(650,150,100,0,Math.PI,false);

 context.stroke();

 smile.addColorStop(0.3,"yellow");

 smile.addColorStop(0.8,"rgb(232,14,87)");

 context.fillStyle = smile;

 context.fill();

 context.closePath();

 /////smiley

 context.beginPath();

 context.arc(650,140,75,0,Math.PI,false);

 context.stroke();

 context.closePath();

 //left eye

 var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.arc(610,110,10,0,Math.PI,true);

 context.stroke();

 eye.addColorStop(0.3,"green");

 eye.addColorStop(0.8,"blue");

 context.fillStyle = eye;

 context.fill();

 context.closePath();

 var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.arc(610,110,10,0,Math.PI,false);

 context.stroke();

 eye.addColorStop(0.3,"green");

 eye.addColorStop(0.8,"blue");

 context.fillStyle = yippee;

 context.fill();

 context.closePath();

 ///right eye

 var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.arc(685,110,10,0,Math.PI,true);

 context.stroke();

  eye.addColorStop(0.3,"yellow");

 eye.addColorStop(0.8,"blue");

 context.fillStyle = eye;

 context.fill();

 context.closePath();

var yippee = context.createLinearGradient(0,0, canvas.width, canvas.height);

 context.beginPath();

 context.arc(685,110,10,0,Math.PI,false);

 context.stroke();

 yippee.addColorStop(0.3,"yellow");

 yippee.addColorStop(0.8,"blue");

 context.fillStyle = yippee;

 context.fill();

 context.closePath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE