Run results for: canvas blitting techniques

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser: Chrome 128

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

putImageData

6K/s

2 tone fillRect

7/s

unique fillRect

3/s

View exact numbers

Test name	Executions per second
✓ putImageData	5,813 Ops/sec
2 tone fillRect	7 Ops/sec
unique fillRect	3 Ops/sec

HTML Preparation code:

<canvas id="c" width="800" height="300"></canvas>

Script Preparation code:

width = 800;
height = 300;
canvas = document.getElementById('c');
context = canvas.getContext('2d');
buffer = context.createImageData(width, height);
for(let i=0;i<width*height;i++){
  buffer.data[i*4+0] = Math.random()*255;
  buffer.data[i*4+1] = Math.random()*255;
  buffer.data[i*4+2] = Math.random()*255;
  buffer.data[i*4+3] = 255;
}

Tests:

putImageData
context.putImageData(buffer, 0, 0);
unique fillRect
for(let y=0;y<300;y++){ for(let x=0;x<800;x++){ const offset = (y*width+x)*4; context.fillStyle = `rgb(${buffer.data[offset+0]}, ${buffer.data[offset+1]}, ${buffer.data[offset+2]})`; context.fillRect(x, y, 1, 1); } }
2 tone fillRect
context.fillStyle = `rgb(192, 192, 192)`; for(let y=0;y<300;y++){ for(let x=0;x<800;x++){ const offset = (y*width+x)*4; if(buffer.data[offset+0]>127){ context.fillRect(x, y, 1, 1); } } } context.fillStyle = `rgb(64, 64, 64)`; for(let y=0;y<300;y++){ for(let x=0;x<800;x++){ const offset = (y*width+x)*4; if(buffer.data[offset+0]<128){ context.fillRect(x, y, 1, 1); } } }