Run results for: putImageData vs drawImage manual

Run details:

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser: Firefox 115

Operating system: Windows 7

Device Platform: Desktop

Date tested: 13 days ago

Test name	Executions per second
imgdata	541.7 Ops/sec
pixels	77.5 Ops/sec

HTML Preparation code:

<canvas id="canvas" width="320" height="320"></canvas>

Script Preparation code:

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)

Tests:

imgdata
drawrandom() ctx2.putImageData(imgdata, 0, 0) drawimgdata(c.transferToImageBitmap())
pixels
drawrandom() drawpixels(pixels)