MeasureThat.net

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

Go to the benchmark
Run details:
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
Chrome 129
Mac OS X 10.15.7
Desktop
6 months ago
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
Script Preparation code:
​x
 
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());
    })();