Canvas Creation vs Size change

JavaScript performance comparison

Test case created by

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 CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
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…
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 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…
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…

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