Canvas -> house

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #can1
        {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="can1" width="500" height="550">
    </canvas>

</body>
    <script>
        var ctx = document.getElementById('can1').getContext('2d');
        // house base
        ctx.strokeStyle = '#000000';
        ctx.lineWidth = 2;
        ctx.fillStyle = '#975B5B';
        ctx.fillRect(100, 200, 300, 300);
        ctx.strokeRect(100, 200, 300, 300);
        // roof
        ctx.beginPath();
        ctx.moveTo(100, 200);
        ctx.lineTo(250, 50);
        ctx.lineTo(400, 200);
        ctx.lineTo(100, 200);
        ctx.fill();
        ctx.stroke();
        //chimney
        ctx.beginPath();
        ctx.moveTo(330, 180);
        ctx.lineTo(330, 100);
        ctx.lineTo(360, 100);
        ctx.lineTo(360, 180);
        ctx.fill();
        ctx.stroke();

        // upper windows
        ctx.fillStyle = '#000000';
        ctx.fillRect(140, 250, 40, 30);
        ctx.fillRect(185, 250, 40, 30);
        ctx.fillRect(140, 285, 40, 30);
        ctx.fillRect(185, 285, 40, 30);

        ctx.fillRect(270, 250, 40, 30);
        ctx.fillRect(315, 250, 40, 30);
        ctx.fillRect(270, 285, 40, 30);
        ctx.fillRect(315, 285, 40, 30);

        // base window
        ctx.fillRect(270, 350, 40, 30);
        ctx.fillRect(315, 350, 40, 30);
        ctx.fillRect(270, 385, 40, 30);
        ctx.fillRect(315, 385, 40, 30);

        // door
        ctx.beginPath();
        ctx.moveTo(140, 500);
        ctx.lineTo(140, 420);
        ctx.moveTo(215, 420);
        ctx.lineTo(215, 500);
        ctx.moveTo(177, 500);
        ctx.lineTo(177, 404);
        ctx.stroke();

        //door small circles
        ctx.beginPath();
        ctx.arc(165, 465, 5, 0, Math.PI * 2, false);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(190, 465, 5, 0, Math.PI * 2, false);
        ctx.stroke();

        // door arc
        ctx.save();
        ctx.scale(2.5, 1);
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.arc(71, 420, 15, Math.PI, 2 * Math.PI, false);
        ctx.restore();
        ctx.stroke();
    </script>
</html>