MeasureThat.net

Run results for: PutImageData vs DrawImage Large

copying canvas with PutImageData vs DrawImage

Go to the benchmark
Run details:
Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0
Firefox 125
Linux
Desktop
one year ago
Test name Executions per second
DrawImage copy canvas -> canvas 181618.1 Ops/sec
PutImageData copy imgData -> canvas 570.8 Ops/sec
PutImageData copy canvas -> imgData -> canvas 345.3 Ops/sec
HTML Preparation code:
AخA
 
1
<canvas id='master' width='1000' height='1000'></canvas>
2
<canvas id='pid' width='1000' height='1000'></canvas>
3
<canvas id='pid2' width='1000' height='1000'></canvas>
Script Preparation code:
​x
 
var canvas = document.getElementById('master');
var ctx = canvas.getContext('2d');
var pid = document.getElementById('pid').getContext('2d');
var pid2 = document.getElementById('pid2').getContext('2d');
var imgData;
var width = 1000;
var height = 1000;
ctx.width = width;
ctx.height = height;
ctx.fillStyle = "red";
​
// DRAW SOME BLOCKS
for (let i=0; i<width; i+=50) {
  ctx.fillRect(i,0,50,50);
  ctx.fillRect(i,(height/2)-25,50,50);
  ctx.fillRect(i,height-50,50,50);
}
for (let i=0; i<height; i+=50) {
  ctx.fillRect(0,i,50,50);
  ctx.fillRect((width/2)-25,i,50,50);
  ctx.fillRect(width-50,i,50,50);
}
​
// PRE-COPY IMG DATA
imgData = ctx.getImageData(0,0,width,height);
​
Tests:

  • DrawImage copy canvas -> canvas

     
    pid.drawImage(canvas,0,0);

  • PutImageData copy imgData -> canvas

     
    pid2.putImageData(imgData,0,0);

  • PutImageData copy canvas -> imgData -> canvas

     
    let imgDataLocal = ctx.getImageData(0,0,width,height);
    pid2.putImageData(imgDataLocal,0,0);