Run results for: canvas2d.drawImage(imageElement) vs createImageBitmap(imageElement) (v321)

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 144

Operating system: Android

Device Platform: Mobile

Date tested: 5 months ago

canvas2d.drawImage(imageElement)

1K/s

createImageBitmap(imageElement)

327/s

View exact numbers

Test name	Executions per second
✓ canvas2d.drawImage(imageElement)	1,376 Ops/sec
createImageBitmap(imageElement)	327 Ops/sec

Script Preparation code:

var img = new Image();
var canvas = document.createElement('canvas');
var resCanvas = document.createElement('canvas');
var isReady = false;

var frameRaw1 = null;
      frameRaw1 = canvas.getContext('2d');
var frameRaw2 = null;
var result = null;
      result = resCanvas.getContext('2d');

img.addEventListener('load', function() {
    createImageBitmap(img).then(function(imageBitmap) {
      frameRaw2 = imageBitmap;
      canvas.width = frameRaw2.width;
      canvas.height = frameRaw2.height;
      resCanvas.width = frameRaw2.width;
      resCanvas.height = frameRaw2.height;
      isReady = true;
	});
});

img.src = 'https://fastly.picsum.photos/id/159/536/354.jpg?hmac=59u2RZ-L-Vjfrvsa9T21nZU7ylv03-EGGKErZCaf488';

Tests:

canvas2d.drawImage(imageElement)
frameRaw1.clearRect(0, 0, canvas.width, canvas.height); frameRaw1.drawImage(img, 0, 0); result.drawImage(canvas, 0, 0);
createImageBitmap(imageElement)
createImageBitmap(img).then(function(r) { frameRaw2 = imageBitmap; result.drawImage(frameRaw2, 0, 0); });