Run results for: PID vs DrawImage

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser: Firefox 132

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

pid half

299K/s

di half

213K/s

pid full

199K/s

di full

23K/s

View exact numbers

Test name	Executions per second
✓ pid half	299,444 Ops/sec
di half	212,871 Ops/sec
pid full	199,116 Ops/sec
di full	22,770 Ops/sec

HTML Preparation code:

<canvas id='master' width='100' height='100'></canvas>
<canvas id='clone' width='100' height='100'></canvas>

Script Preparation code:

var master = document.getElementById('master');
var masterctx = master.getContext('2d');
var clone = document.getElementById('master').getContext('2d');

masterctx.fillRect(0,0,50,50);
masterctx.fillStyle = "red";
masterctx.fillRect(50,50,100,100);
var img = masterctx.getImageData(0,0,100,100);

var half = masterctx.getImageData(25,0,50,100);

Tests:

di full
clone.drawImage(master,0,0); clone.clearRect(0,0,100,100);
di half
clone.drawImage(master,25,0,50,100,25,0,50,100); clone.clearRect(0,0,100,100);
pid full
clone.putImageData(img,0,0); clone.clearRect(0,0,100,100);
pid half
clone.putImageData(half,25,0); clone.clearRect(0,0,100,100);