JSFiddle - React, Tailwind, and code Playground

HTML

<p>Try clicking the car and its wheels:</p>
<canvas width="400" height="300">
</canvas>

<script src="https://cdn.rawgit.com/hammerlab/data-canvas/47b8a06b87815d348f1570c80a7d7821e89014da/src/data-canvas.js"></script>

JavaScript

var car = {
  name: 'Box car',
  x: 100,
  y: 100,
  width: 200,
  wheels: [
    {name: 'back wheel', x: 20, radius: 15},
    {name: 'front wheel', x: 180, radius: 10}
  ]
};

var canvas = document.querySelector('canvas');

function renderScene(ctx) {
  ctx.pushObject(car);  // <---
  ctx.fillStyle = 'red';
  ctx.fillRect(car.x, car.y - 25, car.width, 25);
  ctx.fillRect(car.x + 50, car.y - 50, car.width - 100, 25);
  ctx.fillStyle = 'black';
  ctx.strokeStyle = 'gray';
  car.wheels.forEach(function(wheel) {
    ctx.pushObject(wheel);  // <---
    ctx.beginPath();
    ctx.arc(car.x + wheel.x, car.y, wheel.radius, 0, Math.PI*2, true);
    ctx.fill();
    ctx.stroke();
    ctx.popObject();  // <---
  });
  ctx.popObject();  // <---
}

function renderBoxyCar() {
  var ctx = dataCanvas.getDataContext(canvas.getContext('2d'));   // <---
  renderScene(ctx);
}
renderBoxyCar();

canvas.onclick = function(e) {
  var ctx = canvas.getContext('2d');
  var trackingContext = new dataCanvas.ClickTrackingContext(ctx, e.offsetX, e.offsetY);
  renderScene(trackingContext);

  if (trackingContext.hit) {
    alert(trackingContext.hit[0].name);
  }
};