JSFiddle - React, Tailwind, and code Playground

by s_yoshiki

HTML

<div id='loading-status'></div>
<div id='main'></div>

CSS

canvas {
  background-color: #f3f3f3;
}

JavaScript

let imagesUrl = [
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/lenna.png",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/thorino.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/imori.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/lenna.png",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/thorino.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/imori.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/lenna.png",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/thorino.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/imori.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/lenna.png",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/thorino.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/imori.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/lenna.png",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/thorino.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/imori.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/lenna.png",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/thorino.jpg",
  "https://s-yoshiki.github.io/Gasyori100knockJS/images/imori.jpg",
]

let images = new Array(imagesUrl.length)

let loadingCount = 0

const loadingEvent = () => {
  document.getElementById('loading-status').innerHTML = `loading ${loadingCount}/${images.length}`
}

const mainEvent = () => {
  for (let i = 0; i < images.length; i++) {
    let canvas = document.createElement('canvas')
    canvas.width = images[i].width
    canvas.height = images[i].height
    canvas.getContext('2d').drawImage(images[i], 0, 0)
    document.getElementById('main').appendChild(canvas)
  }
}

for (let i = 0; i < imagesUrl.length; i++) {
  images[i] = new Image()
  images[i].src = imagesUrl[i]
  images[i].crossOrigin = "Anonymous";
  images[i].addEventListener('load', () => {
    loadingCount++
    loadingEvent()
    if...