Canvas Batching

Benchmark created by crazy2be on

Preparation HTML

<canvas id="my-canvas">
</canvas>

Setup

var elm = document.getElementById('my-canvas');
    var c = elm.getContext('2d');

Test runner

Ready to run.

Testing in
TestOps/sec
Batched
c.beginPath();
for (var i = 0; i < 1000; i++) {
  c.strokeStyle = "black";
  c.rect(3, 4, 4, 7);
}
c.stroke();
ready
Seperate
for (var i = 0; i < 1000; i++) {
  c.strokeStyle = "black";
  c.strokeRect(3, 4, 4, 7);
}
ready
Batched with no state change
c.beginPath();
c.strokeStyle = "black";
for (var i = 0; i < 1000; i++) {
  c.rect(3, 4, 4, 7);
}
c.stroke();
ready
Seperate with no state change
c.strokeStyle = "black";
for (var i = 0; i < 1000; i++) {
  c.strokeRect(3, 4, 4, 7);
}
ready

Revisions

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

  • Revision 1: published by crazy2be on