Canvas getImageData

JavaScript performance comparison

Test case created by Claus

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var canvas512 = document.createElement("canvas");
    canvas512.width = canvas512.height = 1024
    var ctx512 = canvas512.getContext("2d", { willReadFrequently: true });
   
    var canvas1024 = document.createElement("canvas");
    canvas1024.width = canvas1024.height = 1024
    var ctx1024 = canvas1024.getContext("2d", { willReadFrequently: true });
   
    var canvas2048 = document.createElement("canvas");
    canvas2048.width = canvas2048.height = 1024
    var ctx2048 = canvas2048.getContext("2d", { willReadFrequently: true });
   
    var canvas = document.createElement("canvas");
    canvas.width = canvas.height = 200;
    var ctx = canvas.getContext("2d", { willReadFrequently: true });
   
    function fill(ctx) {
      ctx.save();
      ctx.beginPath();
      ctx.rect(0, 0, 100, 100);
      ctx.fillStyle = "#ff0000";
      ctx.fill();
      ctx.closePath();
    }
   
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
ctx512
fill(ctx512);
var image = ctx512.getImageData(0, 0, 100, 100);
ctx512.putImageData(image, 0, 0);
ctx.drawImage(canvas512, 0, 0, 100, 100, 0, 0, 100, 100);
 
pending…
ctx1024
fill(ctx1024);
var image = ctx1024.getImageData(0, 0, 100, 100);
ctx1024.putImageData(image, 0, 0);
ctx.drawImage(canvas1024, 0, 0, 100, 100, 0, 0, 100, 100);
 
pending…
ctx2048
fill(ctx2048);
var image = ctx2048.getImageData(0, 0, 100, 100);
ctx2048.putImageData(image, 0, 0);
ctx.drawImage(canvas2048, 0, 0, 100, 100, 0, 0, 100, 100);
 
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment