Run results for: HTMLCanvasElement and OffscreenCanvas drawImage performance for HTMLImageElement, HTMLCanvasElement, OffscreenCanvas and ImageBitmap

Run details:

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

Browser: Chrome 112

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
HTMLCanvasElement 2d drawImage HTMLImageElement	2073025.9 Ops/sec
HTMLCanvasElement 2d drawImage HTMLCanvasElement	2437024.5 Ops/sec
HTMLCanvasElement 2d drawImage OffscrenCanvas	2386898.0 Ops/sec
HTMLCanvasElement 2d drawImage ImageBitmap	2441233.5 Ops/sec
OffscreenCanvas 2d drawImage HTMLImageELement	2351536.0 Ops/sec
OffscreenCanvas 2d drawImage HTMLCanvasElement	2214576.8 Ops/sec
OffscreenCanvas 2d drawImage OffscreenCanvas	2423299.8 Ops/sec
OffscreenCanvas 2d drawImage ImageBitmap	2517768.2 Ops/sec
HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap	1642198.8 Ops/sec
OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap	1242713.4 Ops/sec

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()); })();

Run results for: HTMLCanvasElement and OffscreenCanvas drawImage performance for HTMLImageElement, HTMLCanvasElement, OffscreenCanvas and ImageBitmap

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