Benchmark: Canvas paths performance

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 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

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Windows

View result in a separate tab

Test name	Executions per second
Direct draw	130.9 Ops/sec
New path	14718.2 Ops/sec
Cached path	30501.3 Ops/sec
Direct with beginpath	17044.2 Ops/sec
Direct fillrect	26224.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark for measuring the performance of different drawing approaches in HTML5 Canvas. The benchmark creates a canvas with 50 rectangles and then draws each rectangle using various methods, such as direct draw, new path, cached path, direct with beginpath, and direct fillrect.

**Test Cases**

Each test case measures the performance of a specific drawing approach:

1. **Direct Draw**: Draws each rectangle directly without creating a path.
2. **New Path**: Creates a new path for each rectangle before drawing it.
3. **Cached Path**: Uses the cachedPath property of the rectangle object to draw each rectangle using an existing path.
4. **Direct with Beginpath**: Draws each rectangle by starting a new path and then filling it.
5. **Direct Fillrect**: Fills a rectangle directly without creating a path.

**Library:**

* None explicitly mentioned, but `Path2D` is used in the benchmark code. It's a built-in JavaScript API for working with paths in HTML5 Canvas.

**Special JS Features/Syntax:**

None explicitly mentioned.

**Options Compared:**

The benchmark compares five different drawing approaches:

1. **Direct Draw**: Uses `ctx.rect()` and `ctx.fill()`
2. **New Path**: Uses `new Path2D()` and then `path.rect()` followed by `ctx.fill(path)`
3. **Cached Path**: Uses the `cachedPath` property of the rectangle object and then `ctx.fill(cachedPath)`
4. **Direct with Beginpath**: Starts a new path using `ctx.beginPath()` before drawing each rectangle
5. **Direct Fillrect**: Fills a rectangle directly without creating a path using `ctx.fillRect()`

**Pros and Cons:**

1. **Direct Draw**: Fastest, but may not be efficient for complex shapes.
	* Pros: Simple, fast
	* Cons: May lead to inefficient rendering
2. **New Path**: More flexible, but slower.
	* Pros: Can handle complex shapes, more control over drawing
	* Cons: Slower, requires more code
3. **Cached Path**: Faster than direct draw, but still slower than new path.
	* Pros: Fast, efficient for simple shapes
	* Cons: May not work well with complex shapes
4. **Direct with Beginpath**: More flexible than direct draw, but still slower.
	* Pros: Can handle complex shapes, more control over drawing
	* Cons: Slower, requires more code
5. **Direct Fillrect**: Fastest for filling rectangles, but not suitable for other shapes.
	* Pros: Fast for filling rectangles
	* Cons: Not suitable for other shapes

**Other Alternatives:**

* Using `ctx.globalAlpha` and `ctx.globalCompositeOperation` to optimize drawing performance.
* Using WebAssembly (WASM) or native libraries like Skia or Cairo to accelerate graphics rendering.

Please note that the best approach depends on the specific use case, hardware, and requirements. This benchmark provides a general idea of how different drawing approaches compare in terms of performance.

Related benchmarks:

Canvas paths performance (version: 0)

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

Created: 6 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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):