Benchmark: HTMLCanvasElement and OffscreenCanvas drawImage performance for HTMLImageElement, HTMLCanvasElement, OffscreenCanvas and ImageBitmap

HTMLCanvasElement and OffscreenCanvas drawImage performance for HTMLImageElement, HTMLCanvasElement, OffscreenCanvas and ImageBitmap (version: 3)

Comparing performance of: HTMLCanvasElement 2d drawImage HTMLImageElement vs HTMLCanvasElement 2d drawImage HTMLCanvasElement vs HTMLCanvasElement 2d drawImage OffscrenCanvas vs HTMLCanvasElement 2d drawImage ImageBitmap vs OffscreenCanvas 2d drawImage HTMLImageELement vs OffscreenCanvas 2d drawImage HTMLCanvasElement vs OffscreenCanvas 2d drawImage OffscreenCanvas vs OffscreenCanvas 2d drawImage ImageBitmap vs HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap vs OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap

Created: 5 years ago by: Registered User

Go to the latest result

Script Preparation code:

const image = document.createElement('img');
const loading = new Promise(resolve => {
    image.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';
    image.addEventListener('load', () => resolve(image));
});
(async function setup () {
  	await loading;
    const width = image.naturalWidth;
    const height = image.naturalHeight;

    canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(image, 0, 0);

    offscreen = new OffscreenCanvas(width, height);
    offscreen.getContext('2d').drawImage(image, 0, 0);

    bitmap = offscreen.transferToImageBitmap();

    const c1 = document.createElement('canvas');
    c1.width = width;
    c1.height = height;
    ctx1 = c1.getContext('2d');

    const c2 = new OffscreenCanvas(width, height);
    ctx2 = c2.getContext('2d');
  
  	const c3 = document.createElement('canvas');
    c3.width = width;
    c3.height = height;
    ctx3 = c3.getContext('bitmaprenderer');
  
  	const c4 = new OffscreenCanvas(width, height);
    ctx4 = c4.getContext('bitmaprenderer');
})();
async function getTestObjects() {
  	await loading;
  	return {
      image,
      canvas,
      offscreen,
      bitmap,
      ctx1,
      ctx2,
      ctx3,
      ctx4,
    }
}

Tests:

HTMLCanvasElement 2d drawImage HTMLImageElement
(async function draw() { const {ctx1, image} = await getTestObjects(); ctx1.drawImage(image, 0, 0); })();
HTMLCanvasElement 2d drawImage HTMLCanvasElement
(async function draw() { const {ctx1, canvas} = await getTestObjects(); ctx1.drawImage(canvas, 0, 0); })();
HTMLCanvasElement 2d drawImage OffscrenCanvas
(async function draw() { const {ctx1, offscreen} = await getTestObjects(); ctx1.drawImage(offscreen, 0, 0); })();
HTMLCanvasElement 2d drawImage ImageBitmap
(async function draw() { const {ctx1, bitmap} = await getTestObjects(); ctx1.drawImage(bitmap, 0, 0); })();
OffscreenCanvas 2d drawImage HTMLImageELement
(async function draw() { const {ctx2, image} = await getTestObjects(); ctx2.drawImage(image, 0, 0); })();
OffscreenCanvas 2d drawImage HTMLCanvasElement
(async function draw() { const {ctx2, canvas} = await getTestObjects(); ctx2.drawImage(canvas, 0, 0); })();
OffscreenCanvas 2d drawImage OffscreenCanvas
(async function draw() { const {ctx2, offscreen} = await getTestObjects(); ctx2.drawImage(offscreen, 0, 0); })();
OffscreenCanvas 2d drawImage ImageBitmap
(async function draw() { const {ctx2, bitmap} = await getTestObjects(); ctx2.drawImage(bitmap, 0, 0); })();
HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap
(async function draw() { const {ctx3, offscreen} = await getTestObjects(); ctx3.transferFromImageBitmap(offscreen.transferToImageBitmap()); })();
OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap
(async function draw() { const {ctx4, offscreen} = await getTestObjects(); ctx4.transferFromImageBitmap(offscreen.transferToImageBitmap()); })();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
HTMLCanvasElement 2d drawImage HTMLImageElement
HTMLCanvasElement 2d drawImage HTMLCanvasElement
HTMLCanvasElement 2d drawImage OffscrenCanvas
HTMLCanvasElement 2d drawImage ImageBitmap
OffscreenCanvas 2d drawImage HTMLImageELement
OffscreenCanvas 2d drawImage HTMLCanvasElement
OffscreenCanvas 2d drawImage OffscreenCanvas
OffscreenCanvas 2d drawImage ImageBitmap
HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap
OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

OffscreenCanvas 2d drawImage HTMLImageELement

3.9M/s

HTMLCanvasElement 2d drawImage ImageBitmap

3.9M/s

HTMLCanvasElement 2d drawImage HTMLCanvasElement

3.9M/s

OffscreenCanvas 2d drawImage OffscreenCanvas

3.9M/s

OffscreenCanvas 2d drawImage HTMLCanvasElement

3.8M/s

HTMLCanvasElement 2d drawImage OffscrenCanvas

3.7M/s

OffscreenCanvas 2d drawImage ImageBitmap

3.5M/s

HTMLCanvasElement 2d drawImage HTMLImageElement

2.5M/s

HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap

787K/s

OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap

99K/s

View exact numbers

Test name	Executions per second
✓ OffscreenCanvas 2d drawImage HTMLImageELement	3,949,468 Ops/sec
HTMLCanvasElement 2d drawImage ImageBitmap	3,891,301 Ops/sec
HTMLCanvasElement 2d drawImage HTMLCanvasElement	3,871,318 Ops/sec
OffscreenCanvas 2d drawImage OffscreenCanvas	3,867,609 Ops/sec
OffscreenCanvas 2d drawImage HTMLCanvasElement	3,789,899 Ops/sec
HTMLCanvasElement 2d drawImage OffscrenCanvas	3,731,187 Ops/sec
OffscreenCanvas 2d drawImage ImageBitmap	3,464,550 Ops/sec
HTMLCanvasElement 2d drawImage HTMLImageElement	2,529,892 Ops/sec
HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap	787,412 Ops/sec
OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap	98,624 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

HTMLCanvasElement and OffscreenCanvas drawImage performance for HTMLImageElement, HTMLCanvasElement, OffscreenCanvas and ImageBitmap (version: 3)

Created: 5 years ago by: Registered User

Go to the latest result

HTMLCanvasElement 2d drawImage HTMLImageElement

HTMLCanvasElement 2d drawImage HTMLCanvasElement

HTMLCanvasElement 2d drawImage OffscrenCanvas

HTMLCanvasElement 2d drawImage ImageBitmap

OffscreenCanvas 2d drawImage HTMLImageELement

OffscreenCanvas 2d drawImage HTMLCanvasElement

OffscreenCanvas 2d drawImage OffscreenCanvas

OffscreenCanvas 2d drawImage ImageBitmap

HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap

OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks