JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="400" height="300">
</canvas>

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

function renderBoxyCar() {
  var ctx = canvas.getContext('2d');
  renderScene(ctx, car);
}
renderBoxyCar();