Run results for: Alternative ImageBitmap resizing option using CanvasElement

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.

Run details:

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: Chrome 132

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
Image	176593104.0 Ops/sec
ImageBitmap/Offscreen	156608960.0 Ops/sec
ImageBitmap/Offscreen Resized	160471952.0 Ops/sec

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);

Run results for: Alternative ImageBitmap resizing option using CanvasElement

Image

ImageBitmap/Offscreen

ImageBitmap/Offscreen Resized