JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainCanvasDiv"><canvas width="800" height="600" id="mainCanvas"></canvas>

JavaScript

var canvas = document.getElementById('mainCanvas');
var context = canvas.getContext('2d');

function CreateObject(objectImage) {
  lastIndex++;
  PlanObjects[lastIndex] = new PlanObject(lastIndex, currentSlide, 24, 24, 24, 24, objectImage);
  PlanObjects[lastIndex].img.addEventListener('load', function() {
    context.drawImage(PlanObjects[lastIndex].img, PlanObjects[lastIndex].posX, PlanObjects[lastIndex].posY)
  });
}

var PlanObjects = [];
var lastIndex = -1;
var currentSlide = 0;

function PlanObject(id, slide, width, height, posX, posY, img) {
  this.id = id;
  this.slide = slide;
  this.width = width;
  this.height = height;
  this.posX = posX;
  this.posY = posY;
  this.img = new Image();
  this.img.src =...