8.1Act2house

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>house</title>
</head>

<body>

    <canvas id="myCanvas" width="640" height="480" style="boarder:1px solid black";>
    </canvas>

<script>

    var canvas = document.getElementById("myCanvas");
    var drawingTools =canvas.getContext("2d");


        drawingTools.lineWidth = 2;
        strokeStyle = "black";
        drawingTools.strokeRect(0,0,640,480);

    drawingTools.fillStyle = "#00ffff";
    drawingTools.fillRect(10,5,620,470);

    drawingTools.fillStyle = "#996633";
    drawingTools.fillRect(10,350,620,125);

        drawingTools.lineWidth = 1;
        strokeStyle = "black";
        drawingTools.strokeRect(10,5,620,470);

        drawingTools.fillStyle = "#333333";
        drawingTools.lineWidth = 3;
        strokeStyle = "black";
        drawingTools.fillRect(250,150,350,280);
        drawingTools.strokeRect(250,150,350,280);


        drawingTools.lineWidth = 3;
        strokeStyle = "black";
        drawingTools.strokeRect(350,320,80,110);

    drawingTools.fillStyle = "#000000";
    drawingTools.fillRect(350,320,80,110)

    drawingTools.fillStyle = "#663300";
    drawingTools.fillRect(100,370,30,50);

    drawingTools.fillStyle = "#000000";
    drawingTools.fillRect(450,200,80,80);

    drawingTools.fillStyle = "#ffff00";
    drawingTools.fillRect(280,200,80,80);

        drawingTools.lineWidth = 3;
        strokeStyle = "black";
        drawingTools.strokeRect(280,200,80,80);

        drawingTools.lineWidth = 3;
        strokeStyle = "black";
        drawingTools.strokeRect(450,200,80,80);

            drawingTools.strokeStyle = "black";
            drawingTools.fillStyle = "#404040";
            drawingTools.lineWidth = 3;
            drawingTools.beginPath();
            drawingTools.moveTo(250,150);
            drawingTools.lineTo(425,60);
            drawingTools.lineTo(600,150);
            drawingTools.fill();
            drawingTools.stroke();

            drawingTools.strokeStyle = "black";
            drawingTools.fillStyle = "#009900";
            drawingTools.lineWidth = 1;
            drawingTools.beginPath();
            drawingTools.moveTo(60,370);
            drawingTools.lineTo(120,300);
            drawingTools.lineTo(180,370);
            drawingTools.fill();
            drawingTools.stroke();

            //drawingTools.strokeStyle = "black"
            drawingTools.fillStyle = "#009900";
            drawingTools.lineWidth = 3;
            drawingTools.beginPath();
            drawingTools.moveTo(70,330);
            drawingTools.lineTo(120,270);
            drawingTools.lineTo(170,330);
            drawingTools.stroke();
            drawingTools.fill();

            drawingTools.strokeStyle = "black"
            drawingTools.fillStyle = "#009900";
            drawingTools.lineWidth = 3;
            drawingTools.beginPath();
            drawingTools.moveTo(80,290);
            drawingTools.lineTo(120,240);
            drawingTools.lineTo(160,290);
            drawingTools.stroke();
            drawingTools.fill();


    drawingTools.fillStyle = "#FFFF71";
    drawingTools.beginPath();
    drawingTools.arc(70,95,30,0,2*Math.PI);
    drawingTools.fill();

    </script>
    </body>
</html>