Canvas Creation vs Size change

JavaScript performance comparison

Test case created

Preparation code

 
<script>
  Benchmark.prototype.setup = function() {
    var ctx = document.createElement("canvas").getContext("2d");
    var ctx2 = document.createElement("canvas").getContext("2d");
    ctx2.canvas.width = 500;
    ctx2.canvas.height = 500;
    
    var ctx3 = document.createElement("canvas").getContext("2d");
    ctx3.canvas.width = 1500;
    ctx3.canvas.height = 1500;
  };
</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
Create New
 
for (var i = 1; i < 100; i++) {
  var ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = i;
  ctx.canvas.height = i;
  imageData = ctx.getImageData(0, 0, i, i);
}
for (var i = 100; i > 0; i--) {
  var ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = i;
  ctx.canvas.height = i;
  imageData = ctx.getImageData(0, 0, i, i);
}
 pending…
Change Size
 
for (var i = 1; i < 100; i++) {
  ctx.canvas.width = i;
  ctx.canvas.height = i;
  imageData = ctx.getImageData(0, 0, i, i);
}
for (var i = 100; i > 0; i--) {
  ctx.canvas.width = i;
  ctx.canvas.height = i;
  imageData = ctx.getImageData(0, 0, i, i);
}
 pending…
Grab from empty
 
for (var i = 1; i < 100; i++) {
  imageData = ctx2.getImageData(0, 0, i, i);
}
for (var i = 100; i > 0; i--) {
  imageData = ctx2.getImageData(0, 0, i, i);
}
 pending…
Grab from empty 2
 
for (var i = 1; i < 100; i++) {
  imageData = ctx3.getImageData(0, 0, i, i);
}
for (var i = 100; i > 0; i--) {
  imageData = ctx3.getImageData(0, 0, i, i);
}
 pending…
createImageData
 
for (var i = 1; i < 100; i++) {
  imageData = ctx.createImageData(i, i);
}
for (var i = 100; i > 0; i--) {
  imageData = ctx.createImageData(i, i);
}
 pending…

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

Compare results of other browsers

0 comments

Add a comment