Benchmark: Alternative ImageBitmap resizing option using CanvasElement

Alternative ImageBitmap resizing option using CanvasElement (version: 0)

There is currently a bug on Chrome Version 74.0.3729.131 (Official Build) (64-bit) (5/12/2019) with ImageBitmap where attempting to resize an ImageBitmap through ImageBitmapOptions will causes the resulting ImageBitmap to render very poorly when used with drawImage, even if the resulting ImageBitmap is resized to be smaller than the source image.

Comparing performance of: `Image vs ImageBitmap/Offscreen vs ImageBitmap/Offscreen Resized`

Created: 7 years ago by: Guest

Go to the latest result

Script Preparation code:

var img = new Image();
img.decoding = 'sync';

var imageBitmap;
var imageBitmapResized;
var doneLoading = false;
let canvas = document.createElement('canvas');

canvas.width = 640;
canvas.height = 480;
let canvas2 = document.createElement('canvas');
let offscreen = canvas2.transferControlToOffscreen();
offscreen.width = 640;
offscreen.height = 480;

var ctx = canvas.getContext('2d');
var ctx2 = offscreen.getContext('2d');

img.addEventListener('load', function() {
    var tempCanv = document.createElement("canvas");
    var tempCtx = tempCanv.getContext('2d');
    tempCanv.width = img.width/2;
    tempCanv.height = img.height/2;
    tempCtx.drawImage(img,0,0,tempCanv.width,tempCanv.height);
  
  Promise.all([
    createImageBitmap(img)
  ]).then(function(images) {
  imageBitmap = images[0];
  doneLoading = true;
}, false);
  
  Promise.all([

    createImageBitmap(tempCanv)

  ]).then(function(images) {
  imageBitmapResized = images[0];
  doneLoading = true;
}, false);
  
});

img.src = 'https://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png';

Tests:

Image
if (doneLoading) ctx.drawImage(img,0,0);
ImageBitmap/Offscreen
if (doneLoading) ctx.drawImage(imageBitmap,0,0);
ImageBitmap/Offscreen Resized
if (doneLoading) ctx.drawImage(imageBitmapResized,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image
ImageBitmap/Offscreen
ImageBitmap/Offscreen Resized

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Image

176.6M/s

ImageBitmap/Offscreen Resized

160.5M/s

ImageBitmap/Offscreen

156.6M/s

View exact numbers

Test name	Executions per second
✓ Image	176,593,104 Ops/sec
ImageBitmap/Offscreen Resized	160,471,952 Ops/sec
ImageBitmap/Offscreen	156,608,960 Ops/sec