HTML5 Project 1

I made a house in the fall time, because one of my favorite seasons back in New York is fall. I used an orange sky to give it that halloween/ fall feeling to it, since the main color of fall is orange.

context.beginPath();

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

context.fillStyle = 'rgb(225, 102, 30)';

context.fill();

context.beginPath();

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

context.fillStyle = 'rgb(10, 50, 10)';

context.fill();

context.beginPath();

context.arc(100, 100, 60, 0, 2*Math.PI, false);

var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);

grd.addColorStop(0, 'red');

grd.addColorStop(1, 'gold');

context.fillStyle = grd;

context.fill();

context.beginPath();

context.rect(598, 200, 170, 200);

context.fillStyle = 'rgb(190, 255, 220)';

context.fill();

context.beginPath();

context.moveTo(800, 200);

context.lineTo(550, 200);

context.lineTo(675, 50);

context.lineTo(805, 200);

context.strokeStyle = 'gray';

context.fillStyle = 'black';

context.fill();

context.stroke();

context.beginPath();

context.rect(650, 300, 50, 100);

context.fillStyle = 'rgb(50, 30, 20)';

context.fill();

context.beginPath();

context.arc(690, 350, 5, 0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.beginPath();

context.rect(620, 225, 30, 50);

context.fillStyle = 'rgb(240, 250, 10)';

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(720, 225, 30, 50);

context.fillStyle = 'rgb(240, 250, 10)';

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = 'black';

context.stroke();

//path

context.beginPath();

context.rect(630, 400, 100, 200);

context.fillStyle = 'rgb(35, 35, 35)';

context.fill();

context.beginPath();

context.moveTo(630, 497);

context.lineTo(730, 497);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.moveTo(630, 400);

context.lineTo(730, 400);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.moveTo(630, 595);

context.lineTo(730, 595);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.moveTo(630, 450);

context.lineTo(730, 450);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.moveTo(630, 545);

context.lineTo(730, 545);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

//tree

context.beginPath();

context.moveTo(100, 270);

context.quadraticCurveTo(200, 430, 100, 580);

context.lineTo(240, 580);

context.quadraticCurveTo(190, 500, 240, 400);

context.lineWidth = 6;

context.strokeStyle = 'rgb(55, 35, 20)';

context.fillStyle = 'rgb(55, 35, 20)';

context.fill();

context.stroke();

//part of tree

context.beginPath();

context.moveTo(80, 420);

context.quadraticCurveTo(130, 490, 190, 415);

context.quadraticCurveTo(270, 490, 340, 396);

context.quadraticCurveTo(420, 370, 350, 300);

context.quadraticCurveTo(380, 210, 280, 210);

context.quadraticCurveTo(230, 150, 170, 190);

context.quadraticCurveTo(120, 160, 90, 200);

context.quadraticCurveTo(30, 190, 40, 260);

context.quadraticCurveTo(10, 305, 60, 340);

context.quadraticCurveTo(30, 395, 80, 420);

context.fillStyle = 'rgb(10, 100, 30)';

context.fill();

//fence

context.beginPath();

context.moveTo(0, 495);

context.lineTo(800, 495);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.stroke();

context.beginPath();

context.moveTo(0, 565);

context.lineTo(800, 565);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.stroke();

context.beginPath();

context.moveTo(100, 450);

context.lineTo(100, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(175, 450);

context.lineTo(175, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(250, 450);

context.lineTo(250, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(325, 450);

context.lineTo(325, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(400, 450);

context.lineTo(400, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(475, 450);

context.lineTo(475, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(550, 450);

context.lineTo(550, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(625, 450);

context.lineTo(625, 598);

context.lineWidth = 13;

context.strokeStyle = 'white';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(625, 490)

context.lineTo(720, 560)

context.lineWidth = 13;

context.strokeStyle = 'white';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(725, 450);

context.lineTo(725, 598);

context.lineWidth = 13;

context.strokeStyle = 'white';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(793, 450);

context.lineTo(793, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(25, 450);

context.lineTo(25, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.rect(620, 490, 8, 10);

context.fillStyle = 'black';

context.fill();

context.beginPath();

context.rect(620, 563, 8, 10);

context.fillStyle = 'black';

context.fill();

context.beginPath();

context.arc(725, 525, 5, 0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.beginPath();

context.arc(622, 571, 1.3, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(110, 110, 110)';

context.fill();

context.beginPath();

context.arc(622, 565, 1.3, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(110, 110, 110)';

context.fill();

context.beginPath();

context.arc(622, 498, 1.3, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(110, 110, 110)';

context.fill();

context.beginPath();

context.arc(622, 492, 1.3, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(110, 110, 110)';

context.fill();