const canvas = document.getElementById('canvas')

canvas.style.imageRendering = 'pixelated'

canvas.style.backgroundColor = '#000'

canvas.style.outline = 'none'

canvas.style.cursor = 'none'

canvas.style.transform = `scale(2)`

document.body.replaceChildren(canvas)

​

const ctx = canvas.getContext('2d')

​

function drawimgdata(img) {

  ctx.drawImage(img, 0, 0)

  img.close()

}

​

function drawpixels(pixels) {

  const imgdata = new ImageData(pixels, 320, 180)

  ctx.putImageData(imgdata, 0, 0)

}

​

function drawrandom() {

  // for (let n = 0; n < 300; n++)

  for (let y = 0; y < 180; y++) {

    for (let x = 0; x < 320; x++) {

      let i = y * 320 * 4 + x * 4

      pixels[i + 0] = Math.random() * 255

      pixels[i + 1] = Math.random() * 255

      pixels[i + 2] = Math.random() * 255

      pixels[i + 3] = 255

    }

  }

}

​

const c = new OffscreenCanvas(320, 180)

const ctx2 = c.getContext('2d')

​

const pixels = new Uint8ClampedArray(320 * 180 * 4)

const imgdata = new ImageData(pixels, 320, 180)

​