getImageData complexity (v2)

Revision 2 of this benchmark created on

Description

Introduction

performace of getImageData (html5 canvas) in function of the size of data requested.

Conclusion

getImageData is slow, whatever the size of the canvas and of the requested frame.

Preparation HTML

<script language="JavaScript">
var canvas = document.createElement("canvas");
var smallCanvas = document.createElement("canvas");
w = canvas.width = 2000;
h = canvas.height = 2000;
ws = smallCanvas.width = 20;
hs = smallCanvas.height = 20;

document.body.appendChild(canvas);
ctx = canvas.getContext("2d");
smallCtx = smallCanvas.getContext("2d");

var imgdata = ctx.createImageData(2000,2000);
var data = imgdata.data;
for(var i=0;i<data.length;i++){
    data[i] = Math.floor(Math.random()*255);
}
ctx.putImageData(imgdata,0,0);
</script>
<style>
canvas{width:256px;height:256px;}
</style>

Test runner

Ready to run.

Testing in
TestOps/sec
topleft 10*10 square
ctx.getImageData(0,0,10,10);
ready
bottomleft 10*10 square
ctx.getImageData(w-10,h-10,10,10);
ready
100*100 square
ctx.getImageData(0,0,100,100);
ready
1000*1000 square
ctx.getImageData(0,0,1000,1000);
ready
2000*2000 square
ctx.getImageData(0,0,2000,2000);
ready
10*10 square on a small (20*20) canvas
smallCtx.getImageData(0,0,20,20);
ready

Revisions

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