Benchmark: putImageData vs drawImage manual

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)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
imgdata
pixels

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

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

Browser/OS: Firefox 115 on Windows 7

View result in a separate tab

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

Related benchmarks:

putImageData vs drawImage manual (version: 1)

Comparing performance of: imgdata vs pixels

Created: one year ago by: Guest

Jump to the latest result

imgdata

pixels

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A