in html use canvas using dots ,
Use white background .
Draw a house as red line square sides.
In square Add 2 gray square windows and 1 door .
Add black triangle roof.
Add green grass random height vertical spaced lines in front .
Add mailbox in front.
Image on Browser (code is listed after) :
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Draw house
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();
// Draw roof
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(100, 200);
ctx.lineTo(250, 100);
ctx.lineTo(400, 200);
ctx.closePath();
ctx.fill();
// Draw windows
ctx.fillStyle = "gray";
ctx.fillRect(150, 250, 50, 50);
ctx.fillRect(300, 250, 50, 50);
// Draw door
ctx.fillStyle = "gray";
ctx.fillRect(225, 300, 50, 100);
// Draw grass
ctx.beginPath();
ctx.strokeStyle = "green";
for (var i = 100; i <= 400; i += 10) {
var y = Math.random() * 20 + 380;
ctx.moveTo(i, 400);
ctx.lineTo(i, y);
ctx.stroke();
// Draw mailbox
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.fillStyle = "gray";
ctx.fillRect(70, 350, 20, 30);
ctx.moveTo(90, 365);
ctx.arc(90, 365, 5, 0, 2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
