Fastest canvas fill

Benchmark created by Casper Lamboo on

Preparation HTML

<canvas id="canvas"></canvas>

Setup

var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  
  const pathData = [];
  for (var i = 0; i < 300; i += 5) {
    pathData.push({ x: i, y: Math.random() * 150 });
  }
  
  const path = new Path2D();
  for (var i = 0; i < pathData.length; i ++) {
    var x = pathData[i].x;
    var y = pathData[i].y;
    
    path.lineTo(x, y);
  }

Teardown



            context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();

Test runner

Ready to run.

Testing in
TestOps/sec
Reguar stroke
for (var i = 0; i < pathData.length; i ++) {
  var x = pathData[i].x;
  var y = pathData[i].y;
  
  context.lineTo(x, y);
}

context.stroke();
ready
Path2D stroke
context.stroke(path);
ready

Revisions

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

  • Revision 1: published by Casper Lamboo on