canvas drawImage vs putImageData

Benchmark created on

Preparation HTML


<canvas id="c1" width="800" height="600"/>

Setup

var ctx = c1.getContext('2d');
ctx.fillStyle="#FFFFFF"
ctx.fillRect(0, 0, 800, 600);

Test runner

Ready to run.

Testing in
TestOps/sec
putImageData
const imgData = ctx.getImageData(0, 0, 800, 600);
ctx.clearRect(0, 0, 800, 600);
ctx.putImageData(imgData, 0, 0);
ready
drawImage
const imgData = c1.toDataURL("image/png");
ctx.clearRect(0, 0, 800, 600);
const img = new Image();
img.src = imgData;
ctx.drawImage(img, 0, 0);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.