JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<body>
  <canvas id="canvas" width="1000" height="1000"></canvas>
</body>

JavaScript

const draw = () => [
        "https://dummyimage.com/500x250/c98cae/000000.png?text=1",
        "https://dummyimage.com/500x250/8ba8c7/000000.png?text=2",
        "https://dummyimage.com/500x250/8bc7a3/000000.png?text=3",
        "https://dummyimage.com/500x250/ab8f6a/000000.png?text=4"
      ].map((e, i) => {
        let image = new Image();
        image.src = e;
        image.onload = () => document.getElementById(`canvas`).getContext('2d').drawImage(image,500*(i===2?i-2:i===3?i-2:i),250*(i===1?i-1:i===2?i-1:i===3?i-2:i),500,250);
      });
draw();