Run details:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36
Chrome 97
Linux
Desktop
2 years ago
Test name Executions per second
canvas2d.drawImage(imageElement) 7731.4 Ops/sec
createImageBitmap(imageElement) 3615.5 Ops/sec
Script Preparation code:
x
 
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://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png';
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);
    });