Batching Line Drawing Calls (v37)

Revision 37 of this benchmark created on

Description

Compares drawing a simple shape out of multiple lines compared to one polyline.

Preparation HTML

<canvas id="c" width="640" height="480"></canvas>
<script>
  var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');
  context.strokeStyle = 'black';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
calc outside draw loop
context.clearRect(0, 0, canvas.width, canvas.height);
var x = [],
    y = [],
    n = 10000;
for (var i = 0; i<n; i++) {
    x.push(i*400/n);
    y.push(Math.pow(i*400/n));
};

for (var i = 0; i < x.length-1; i++) {
context.beginPath();
context.moveTo(x[i], y[i]);
context.lineTo(x[i+1], y[i+1]);
context.closePath();
context.stroke();
};
ready
calc inside draw loop
context.clearRect(0, 0, canvas.width, canvas.height);
var n = 10000;

for (var i = 0; i < n-1; i++) {
context.beginPath();
context.moveTo(i*400/n, Math.pow(i*400/n));
context.lineTo((i+1)*400/n, Math.pow((i+1)*400/n));
context.closePath();
context.stroke();
};
ready

Revisions

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