Run results for: putImageData vs drawImage methods

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Safari/537.36

Browser: Chrome 95

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Image data	82.4 Ops/sec
Draw Image	17407.8 Ops/sec

HTML Preparation code:

<canvas id="image" width="300" height="300"></canvas>
<canvas id="canvas" width="300" height="300"></canvas>

Script Preparation code:

var imgCanvas = document.getElementById("image");
var imgCtx = imgCanvas.getContext("2d");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

imgCtx.fillStyle = "red";
imgCtx.fillRect(0, 0, 300, 300);

Tests:

Image data
context.putImageData(imgCtx.getImageData(0, 0, 300, 300), 0, 0);
Draw Image
context.drawImage(imgCanvas, 0, 0);

Run results for: putImageData vs drawImage methods

Testing performance

Image data

Draw Image