JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<canvas id="road" height="400" width="600"></canvas>
<button id="start">СТАРТ</button>

CSS

body {
  text-align: center;
}
#road {
  display: block;
  margin: 50px auto;
  border: 2px solid rgba(0, 0, 0, 1);
  background: url(https://media1.fdncms.com/stranger/imager/u/large/36500432/1543622792-gettyimages-953655218.jpg) no-repeat center;
  background-size: cover;
}

JavaScript

let opCnv = (function(w, d) {
  let dataCnv = {
    elem: d.getElementById(`road`),
    ctx: d.getElementById(`road`).getContext(`2d`),
    cockroach_red: {
      x: 10,
      y: 100,
      src: `https://img2.freepng.ru/20190210/cfs/kisspng-florida-woods-cockroach-german-cockroach-blattidae-5c6082f1305db2.6145913415498288491981.jpg`,
    },
    cockroach_blue: {
      x: 10,
      y: 200,
      src: `https://img2.freepng.ru/20190210/cfs/kisspng-florida-woods-cockroach-german-cockroach-blattidae-5c6082f1305db2.6145913415498288491981.jpg`,
    },
  },
      operationCnv = {
        createCocroach: object => {
          let image = new Image(50, 100);
          image.src = object.src;
          dataCnv.ctx.drawImage(image, object.x, object.y);
        },
        draw: () => {
          dataCnv.ctx.clearRect(0, 0, dataCnv.elem.height, dataCnv.elem.width);
          operationCnv.createCocroach(dataCnv.cockroach_red);
          operationCnv.createCocroach(dataCnv.cockroach_blue);
        },
      };
  dataCnv.elem.addEventListener(`load`, operationCnv.draw);

  return dataCnv;
}(window, document));