Benchmark: Canvas paths performance without alpha

HTML Preparation code:

<canvas align="center" id="canvas" width="800" height="800"></canvas>

Script Preparation code:

var ctx = document.getElementById('canvas').getContext('2d', {alpha: false});
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.rect(rect.x, rect.y, rect.width, rect.height); ctx.fill(); }
New path
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; var path = new Path2D(); path.rect(rect.x, rect.y, rect.width, rect.height) ctx.fill(path) }
Cached path
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; ctx.translate(rect.x, rect.y); ctx.fill(rect.path); ctx.translate(-rect.x, -rect.y); }
Direct with beginpath
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; ctx.beginPath(); 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); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Direct draw
New path
Cached path
Direct with beginpath
Direct fillrect

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Mobile; LYF/LF-2403N/LYF-LF2403N-001-02-08-300518-i;Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5

Browser/OS: Firefox Mobile 48 on Firefox OS

View result in a separate tab

Test name	Executions per second
Direct draw	1.8 Ops/sec
New path	170.6 Ops/sec
Cached path	0.9 Ops/sec
Direct with beginpath	206.2 Ops/sec
Direct fillrect	383.7 Ops/sec

Canvas paths performance without alpha (version: 0)

Comparing performance of: Direct draw vs New path vs Cached path vs Direct with beginpath vs Direct fillrect

Created: 4 years ago by: Guest

Jump to the latest result

Direct draw

New path

Cached path

Direct with beginpath

Direct fillrect

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A