Built with blockbuilder.org
xxxxxxxxxx<head><meta charset="utf-8"><script src="https://d3js.org/d3.v4.min.js"></script><style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }</style></head><body> <canvas id="main-canvas" width="600" height="400"></canvas> <script> var canvas = d3.select('#main-canvas').node(); var context = canvas.getContext('2d'); // A frame for the canvas context.strokeStyle = '#CCCCCC'; context.strokeRect(0, 0, canvas.width, canvas.height); // The house context.fillStyle = 'royalblue'; context.fillRect(50, 150, 200, 100); // The door context.fillStyle = 'rgba(255, 255, 255, 0.9)'; context.fillRect(60, 190, 40, 60); // The window context.save(); context.translate(140, 190); context.fillRect(0, 0, 60, 30); context.restore(); // The roof context.beginPath(); context.moveTo(50, 150); context.lineTo(250, 150); context.lineTo(50+200/2, 100); context.closePath(); context.fillStyle = '#A52A2A'; context.fill(); // The tree context.beginPath(); context.lineWidth = 10; context.strokeStyle = 'brown' context.moveTo(300, 250); context.lineTo(300, 125); context.stroke(); context.beginPath(); context.fillStyle = 'green'; context.arc(300, 150, 25, 0, Math.PI * 2); context.fill(); </script></body> https://d3js.org/d3.v4.min.js