Benchmark Run Result for: putImageData vs drawImage manual

putImageData vs drawImage manual

Date tested: one month ago

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Test name	Executions per second
imgdata	1130.2 Ops/sec
pixels	1163.8 Ops/sec

Benchmark definition (click to collapse):

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)

Open this result on MeasureThat.net