MeasureThat.net

Run results for: Canvas paths performance v94

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
Chrome 83
Windows
Desktop
4 years ago
Test name Executions per second
Direct draw 15359.2 Ops/sec
Direct with beginpath 10065.6 Ops/sec
HTML Preparation code:
AخA
 
1
<canvas align="center" id="canvas" width="800" height="800"></canvas>
Script Preparation code:
 
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'rgba(0,1,0,1)';
var rects = []
for (var i = 0; i < 50; i++) {
  var width = 5 + i * 5;
  var height = 7 + i * 3;
  var path = new Path2D();
  path.rect(0, 0, width, height);
  var rect = 
    {
      x: i, 
      y: i, 
      width: width, 
      height: height, 
      cachedPath: path
    };
  rects.push(rect);
}
ctx.clearRect(0, 0, 500, 500);
Tests:

  • Direct draw

     
    for (var i = 0; i < rects.length; i++) {
      var rect = rects[i];
      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
    }

  • Direct with beginpath

     
    for (var i = 0; i < rects.length; i++) {
            var rect = rects[i];
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 1;
            ctx.translate(rect.x, rect.y);
            ctx.beginPath();        
            ctx.rect(rect.x, rect.y, rect.width, rect.height);
            ctx.stroke();
            ctx.translate(-rect.x, -rect.y);
        }