Benchmark: canvas drawing images 2

HTML Preparation code:

<canvas></canvas>

Script Preparation code:

  let image,
      imageData,
      ctx = new OffscreenCanvas(0, 0).getContext('2d'),
      main = document.querySelector('canvas'),
      c = main.getContext('2d'),
      width, height,
      imageAsBlob,
      imageAsBitmap
  async function globalMeasureThatScriptPrepareFunction() {
      image = await loadImage();
      ({width, height} = image)
      ctx.canvas.width = main.width = width
      ctx.canvas.height = main.height = height
      ctx.drawImage(image, 0, 0, width, height)
      imageData = ctx.getImageData(0, 0, width, height)
      imageAsBlob = await loadImage(URL.createObjectURL(await ctx.canvas.convertToBlob()))
      imageAsBitmap = await createImageBitmap(ctx.canvas, 0, 0, width, height)
  }

  function loadImage(url = `https://www.measurethat.net/images/Picture1.png`) {
      return new Promise(resolve => {
          const img = new Image
          img.src = url
          img.onload = () => resolve(img)
      })
  }

  function clear() {
      c.clearRect(0, 0, width, height)
  }
  const repeatCount = 1

  function test(num) {
      switch (num) {
          case 1:
              for (let n = repeatCount; n--;) {
                  c.drawImage(image, 0, 0, width, height)
                  clear()
              }
              break
          case 2:
              for (let n = repeatCount; n--;) {
                  c.putImageData(imageData, 0, 0)
				  clear()
              }
              break
          case 3:
              for (let n = repeatCount; n--;) {
                  c.drawImage(imageAsBlob, 0, 0)
                  clear()
              }
              break
          case 4:
              for (let n = repeatCount; n--;) {
                  c.drawImage(imageAsBitmap, 0, 0)
                  clear()
              }
              break
      }
  }

Tests:

draw image directly
test(1)
putImageData
test(2)
draw image blob
test(3)
draw image bitmap
test(4)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
draw image directly
putImageData
draw image blob
draw image bitmap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Chrome OS 14541.0.0

View result in a separate tab

draw image bitmap

652K/s

draw image blob

336K/s

draw image directly

295K/s

putImageData

2K/s

View exact numbers

Test name	Executions per second
✓ draw image bitmap	651,772 Ops/sec
draw image blob	335,755 Ops/sec
draw image directly	295,122 Ops/sec
putImageData	2,358 Ops/sec

canvas drawing images 2 (version: 1)

Comparing performance of: `draw image directly vs putImageData vs draw image blob vs draw image bitmap`

Created: one year ago by: Guest

Go to the latest result

draw image directly

putImageData

draw image blob

draw image bitmap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

canvas drawing images 2 (version: 1)

Comparing performance of: draw image directly vs putImageData vs draw image blob vs draw image bitmap

Created: one year ago by: Guest

Go to the latest result

draw image directly

putImageData

draw image blob

draw image bitmap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `draw image directly vs putImageData vs draw image blob vs draw image bitmap`