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; rv:102.0) Gecko/20100101 Firefox/102.0

Browser: Firefox 102

Operating system: Windows

Device Platform: Desktop

Date tested: 11 months ago

Test name	Executions per second
HTMLCanvasElement 2d drawImage HTMLImageElement	125250.4 Ops/sec
HTMLCanvasElement 2d drawImage HTMLCanvasElement	116512.1 Ops/sec
HTMLCanvasElement 2d drawImage OffscrenCanvas	103677.2 Ops/sec
HTMLCanvasElement 2d drawImage ImageBitmap	110383.8 Ops/sec
OffscreenCanvas 2d drawImage HTMLImageELement	89438.4 Ops/sec
OffscreenCanvas 2d drawImage HTMLCanvasElement	100369.5 Ops/sec
OffscreenCanvas 2d drawImage OffscreenCanvas	69051.4 Ops/sec
OffscreenCanvas 2d drawImage ImageBitmap	90232.2 Ops/sec
HTMLCanvasElement bitmaprenderer transferFromImageBitmap ImageBitmap	100036.3 Ops/sec
OffscreenCanvas bitmaprenderer transferFromImageBitmap ImageBitmap	83695.2 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