Benchmark: canvas2d.drawImage(imageElement) vs createImageBitmap(imageElement)

Script Preparation code:

var img = new Image();
var canvas = document.createElement('canvas');
var resCanvas = document.createElement('canvas');
var isReady = false;

var frameRaw1 = null;
var frameRaw2 = null;
var result = null;

img.addEventListener('load', function() {
    createImageBitmap(img).then(function(imageBitmap) {
      frameRaw2 = imageBitmap;
      canvas.width = frameRaw2.width;
      canvas.height = frameRaw2.height;
      frameRaw1 = canvas.getContext('2d');
      resCanvas.width = frameRaw2.width;
      resCanvas.height = frameRaw2.height;
      result = resCanvas.getContext('2d');
      isReady = true;
	});
});

img.src = 'https://cdn.britannica.com/20/194520-050-DCAE62F1/New-World-Sylvilagus-cottontail-rabbits.jpg';

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
canvas2d.drawImage(imageElement)
createImageBitmap(imageElement)

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Related benchmarks:

canvas2d.drawImage(imageElement) vs createImageBitmap(imageElement) (version: 0)

Comparing performance of: canvas2d.drawImage(imageElement) vs createImageBitmap(imageElement)

Created: 2 years ago by: Guest

Jump to the latest result

canvas2d.drawImage(imageElement)

createImageBitmap(imageElement)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results