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

Run details:

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

Browser: Chrome 87

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
HTMLCanvasElement drawImage HTMLImageElement	722551.3 Ops/sec
HTMLCanvasElement drawImage HTMLCanvasElement	469793.8 Ops/sec
HTMLCanvasElement drawImage OffscrenCanvas	632916.8 Ops/sec
HTMLCanvasElement drawImage ImageBitmap	630561.8 Ops/sec
OffscreenCanvas draw HTMLImageELement	670662.3 Ops/sec
OffscreenCanvas draw HTMLCanvasElement	546246.6 Ops/sec
OffscreenCanvas draw OffscreenCanvas	620035.5 Ops/sec
OffscreenCanvas draw ImageBitmap	219424.5 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