Run results for: Canvas paths performance -fixed

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Browser: Firefox 135

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

Direct with beginpath

141K/s

Direct fillrect

25K/s

View exact numbers

Test name	Executions per second
✓ Direct with beginpath	141,417 Ops/sec
Direct fillrect	25,009 Ops/sec

HTML Preparation code:

<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 with beginpath
ctx.beginPath(); for (var i = 0; i < rects.length; i++) { var rect = rects[i]; ctx.rect(rect.x, rect.y, rect.width, rect.height); } ctx.fill();
Direct fillrect
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; ctx.fillRect(rect.x, rect.y, rect.width, rect.height); }