Cartoon Source Code

<!DOCTYPE html>

<html>
<head>
<title>House</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function changeCanvasColor(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.fillStyle = "cyan";
context.fillRect(0,0,canvas.width,canvas.height);


//GROUND BACKGROUND

   context.fillStyle = "green";
   context.fillRect(0,300,canvas.width,200);
   var x=0,y = 300;

context.beginPath();
context.moveTo(0, 300);
   context.lineTo(10, 280);
context.lineTo(20, 300);
context.fill();

for(x=0; x<canvas.width; x++){
x = x+9;
   context.beginPath();
   context.moveTo(x, y);
   context.lineTo(x+10, y-20);
context.lineTo(x+20, y);
context.fill();
}


//HOUSE
//pathway
context.fillStyle = "brown";
   context.moveTo(0,500);
   context.lineTo(300,300);
   context.lineTo(100,500);
   context.fill();

context.moveTo(650,500);
   context.lineTo(450,300);
   context.lineTo(750,500);
   context.fill();

//roof
context.moveTo(300,150);
context.lineTo(375,75);
context.lineTo(450,150);
context.stroke();
context.fill();


//BODY OF HOUSE
   context.fillStyle = "orange";
   context.fillRect(300,150,150,150);
   //front door
   context.fillStyle = "brown";
   context.fillRect(305, 260, 20, 40);

//back door
context.fillRect(405, 260, 20, 40);

//windows
context.fillStyle = "cyan";
context.fillRect(320, 175, 20, 20);
context.fillRect(360, 175, 20, 20);
context.fillRect(400, 175, 20, 20);




   //GRASS FOREGROUND
   context.fillStyle = "lightgreen";
   context.fillRect(0,500,canvas.width,100);
   var x=0,y = 500;

context.beginPath();
   context.moveTo(0, 500);
   context.lineTo(10, 480);
context.lineTo(20, 500);
   context.fill();

for(x=0; x<canvas.width; x++){
x = x+9;
   context.beginPath();
   context.moveTo(x, y);
   context.lineTo(x+10, y-20);
context.lineTo(x+20, y);
   context.fill();
}



//CAPTION
context.font = "30px Verdana";

// Create gradient
var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0"," magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");

// Fill with gradient
context.fillStyle = gradient;
context.fillText("No place like home!", 250, 550);


//SUN

context.beginPath();
context.fillStyle = "yellow";
   context.arc(75, 75, 50, 0, Math.PI * 2, true);
context.fill();


   context.beginPath();
   context.moveTo(70,123);
   context.lineTo(75,175);
   context.lineTo(80,123);
   context.fill();

   context.beginPath();
   context.moveTo(75,125);
   context.lineTo(75,175);
   context.strokeStyle = "orange";
   context.stroke();

context.beginPath();
   context.moveTo(123,70);
   context.lineTo(175,75);
   context.lineTo(123,80);
   context.fill();

   context.beginPath();
   context.moveTo(125,75);
   context.lineTo(175,75);
   context.strokeStyle = "orange";
   context.stroke();

context.beginPath();
   context.moveTo(70,25);
   context.lineTo(75,0);
   context.lineTo(80,25);
   context.fill();

   context.beginPath();
   context.moveTo(75,25);
   context.lineTo(75,0);
   context.strokeStyle = "orange";
   context.stroke();

context.beginPath();
   context.moveTo(25,70);
   context.lineTo(0,75);
   context.lineTo(25,80);
   context.fill();

   context.beginPath();
   context.moveTo(25,75);
   context.lineTo(0,75);
   context.strokeStyle = "orange";
   context.stroke();

context.beginPath();
   context.moveTo(40,50);
   context.lineTo(0,0);
   context.lineTo(60,50);
   context.fill();

   context.beginPath();
   context.moveTo(40,40);
   context.lineTo(0,0);
   context.strokeStyle = "orange";
   context.stroke();

context.beginPath();
   context.moveTo(90,100);
   context.lineTo(160,160);
   context.lineTo(110,100);
   context.fill();

   context.beginPath();
   context.moveTo(110,110);
   context.lineTo(160,160);
   context.strokeStyle = "orange";
   context.stroke();

context.beginPath();
   context.moveTo(105,35);
   context.lineTo(150,10);
   context.lineTo(115,50);
   context.fill();

   context.beginPath();
   context.moveTo(110,40);
   context.lineTo(150,10);
   context.strokeStyle = "orange";
   context.stroke();

context.beginPath();
   context.moveTo(35,105);
   context.lineTo(10,150);
   context.lineTo(50,115);
   context.fill();

   context.beginPath();
   context.moveTo(40,110);
   context.lineTo(10,150);
   context.strokeStyle = "orange";
   context.stroke();



// Outer circle
   context.beginPath();
context.fillStyle = "orange";
context.moveTo(110, 75);
context.arc(75, 75, 35, 0, Math.PI, false);
   context.fill();

// Mouth (clockwise)
   context.beginPath();
   context.moveTo(65, 65);
context.arc(60, 65, 5, 0, Math.PI * 2, true);
   context.fill();

// Left eye
context.beginPath();
context.moveTo(95, 65);
context.arc(90, 65, 5, 0, Math.PI * 2, true);
context.fill();

// Right eye

}

document.addEventListener('DOMContentLoaded', changeCanvasColor);
</script>
</head>
<body>
<div id = "gameArea">
<canvas id="mycanvas" width="750" height="600"></canvas>
</div>
</body>
</html>