canvas path sizes

JavaScript performance comparison

Test case created by

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var cvs = document.createElement("canvas");
  var ctx = cvs.getContext("2d");
  
  var test1Points = [];
  for(var i=0; i<1000; ++i)
    test1Points .push([Math.random() * 10, Math.random * 10]);
  
  var test2Points = [];
  for(var i=0; i<1000; ++i)
    test2Points .push([Math.random() * 9000, Math.random * 9000]);
  
  function path(points){
    ctx.fillColor = "#000";
    ctx.beginPath();
  
    var numPoints = points.length;
    var p = points[0];
    ctx.moveTo(p[0], p[1]);
    for (var i = 1; i < numPoints; ++i) {
      p = points[i];
      ctx.lineTo(p[0], p[1]);
    }
    p = points[0];
    ctx.lineTo(p[0], p[1]);
    ctx.fill();
  }

};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
small area
path(test1Points);
pending…
large area
path(test2Points);
pending…

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

Compare results of other browsers

0 Comments