<!DOCTYPE html>
<!--
ERIC STEVENS CISC 3610 - Cartoon 
-->
<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>