Drawing lines on canvas, fillRect vs path

Benchmark created by Daniel on

Description

For drawing vertical lines, which is faster? Using fillRect or creating a path and stroking?

Preparation HTML

<canvas id="testCanvas" width="1024" height="512"></canvas>

Setup

var linesToDraw=16384;
    var canvas=document.getElementById('testCanvas');
    var ctx=canvas.getContext('2d');
    ctx.clearRect(0,0,canvas.width, canvas.height);

Test runner

Ready to run.

Testing in
TestOps/sec
FillRect
for(var x=0;x<linesToDraw;x++){
  ctx.fillRect(x, 0, x, 100);
  }
ready
Path and stroke
for(var x=0;x<linesToDraw;x++){
  ctx.beginPath();
  ctx.moveTo(x,0);
  ctx.lineTo(x, 100);
  ctx.closePath();
  ctx.stroke();
  }
ready

Revisions

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

  • Revision 1: published by Daniel on