fill vs fillRect vs stroke

Benchmark created by thissideup on October 24, 2011

Preparation HTML

<canvas id="canvas" width="800" height="400">
</canvas>

Setup

var canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#000';
    ctx.fillStyle = '#000';
    ctx.lineWidth = 1;
    w = 0.5, h = 50;

Test runner

var x = 0,
    y = 5;

ctx.beginPath();
for (var i = 100; i-- > 0;) {
  ctx.rect(x, y, w, h);
  x = x + 10;
}
ctx.fill();
ctx.closePath();

var x = 0,
    y = 65;

for (var i = 100; i-- > 0;) {
  ctx.fillRect(x, y, w, h);
  x = x + 10;
}

var x = 0,
    y = 125;

ctx.beginPath();
for (var i = 100; i-- > 0;) {
  ctx.moveTo(x, y);
  ctx.lineTo(x, y + h);
  x = x + 10;
}
ctx.stroke();
ctx.closePath();

Revisions

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

• Revision 1: published by thissideup on October 24, 2011