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	10689.5 Ops/sec
HTMLCanvasElement drawImage HTMLCanvasElement	10143.2 Ops/sec
HTMLCanvasElement drawImage OffscrenCanvas	10123.3 Ops/sec
HTMLCanvasElement drawImage ImageBitmap	9484.8 Ops/sec
OffscreenCanvas draw HTMLImageELement	9350.4 Ops/sec
OffscreenCanvas draw HTMLCanvasElement	10067.8 Ops/sec
OffscreenCanvas draw OffscreenCanvas	9329.3 Ops/sec
OffscreenCanvas draw ImageBitmap	10143.0 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