ch1ex2

<!DOCTYPE html>
<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>

// 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