Benchmark: PutImageData vs DrawImage Large

HTML Preparation code:

<canvas id='master' width='1000' height='1000'></canvas>
<canvas id='pid' width='1000' height='1000'></canvas>
<canvas id='pid2' width='1000' height='1000'></canvas>

Script Preparation code:

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DrawImage copy canvas -> canvas
PutImageData copy imgData -> canvas
PutImageData copy canvas -> imgData -> canvas

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 11 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0

Browser/OS: Firefox 125 on Linux

View result in a separate tab

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

PutImageData vs DrawImage Large (version: 0)

copying canvas with PutImageData vs DrawImage

Comparing performance of: DrawImage copy canvas -> canvas vs PutImageData copy imgData -> canvas vs PutImageData copy canvas -> imgData -> canvas

Created: 3 years ago by: Guest

Jump to the latest result

DrawImage copy canvas -> canvas

PutImageData copy imgData -> canvas

PutImageData copy canvas -> imgData -> canvas

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A