canvas drawImage(image vs canvas)

Benchmark created on

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
drawCanvas
const a = document.createElement("canvas");
const ctx = a.getContext("2d");
const ctx2 = canvas.getContext("2d");
ctx2.clearRect(0, 0, 800,600);
ctx2.fillStyle="red";
ctx2.fillRect(0, 0, 100, 200);
ctx2.fillRect(0, 0, 300, 200);
ctx.drawImage(canvas,0,0);
ready
drawImage
const a = document.createElement("canvas");
const ctx = a.getContext("2d");
const ctx2 = canvas.getContext("2d");
ctx2.clearRect(0, 0, 800,600);
ctx2.fillStyle="red";
ctx2.fillRect(0, 0, 100, 200);
ctx2.fillRect(0, 0, 300, 200);
var img = new Image();
img.src = canvas.toDataURL();
ctx.drawImage(img,0,0);
ready
putImagdata
const a = document.createElement("canvas");
const ctx = a.getContext("2d");
const ctx2 = canvas.getContext("2d");
ctx2.clearRect(0, 0, 800, 600);
ctx2.fillStyle="red";
ctx2.fillRect(0, 0, 100, 200);
ctx2.fillRect(0, 0, 300, 200);
ctx.putImageData(ctx2.getImageData(0,0,800, 600),0,0);
ready

Revisions

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