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

Jump 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

Test name	Executions per second
HTMLCanvasElement 2d drawImage HTMLImageElement	2529891.5 Ops/sec
HTMLCanvasElement 2d drawImage HTMLCanvasElement	3871318.5 Ops/sec
HTMLCanvasElement 2d drawImage OffscrenCanvas	3731187.0 Ops/sec
HTMLCanvasElement 2d drawImage ImageBitmap	3891300.8 Ops/sec
OffscreenCanvas 2d drawImage HTMLImageELement	3949467.8 Ops/sec
OffscreenCanvas 2d drawImage HTMLCanvasElement	3789899.0 Ops/sec
OffscreenCanvas 2d drawImage OffscreenCanvas	3867609.0 Ops/sec
OffscreenCanvas 2d drawImage ImageBitmap	3464549.5 Ops/sec
HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap	787411.8 Ops/sec
OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap	98623.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Related benchmarks: