Benchmark: fill/stroke Path2D vs repeated path drawing calls

Script Preparation code:

var
pathCanvas = document.createElement("canvas"),
pathCtx = pathCanvas.getContext("2d"),
drawCanvas = document.createElement("canvas"),
drawCtx = drawCanvas.getContext("2d"),
path2D = new Path2D();

pathCanvas.width = drawCanvas.width = 640;
pathCanvas.height = drawCanvas.height = 480;

path2D.moveTo(20, 10);
path2D.lineTo(80, 10);
path2D.quadraticCurveTo(90, 10, 90, 20);
path2D.lineTo(90, 60);
path2D.quadraticCurveTo(90, 70, 80, 70);
path2D.lineTo(20, 70);
path2D.quadraticCurveTo(10, 70, 10, 60);
path2D.lineTo(10, 20);
path2D.quadraticCurveTo(10, 10, 20, 10);

Tests:

Path2D
pathCtx.fill(path2D);
Draw Path Calls
drawCtx.beginPath(); drawCtx.moveTo(20, 10); drawCtx.lineTo(80, 10); drawCtx.quadraticCurveTo(90, 10, 90, 20); drawCtx.lineTo(90, 60); drawCtx.quadraticCurveTo(90, 70, 80, 70); drawCtx.lineTo(20, 70); drawCtx.quadraticCurveTo(10, 70, 10, 60); drawCtx.lineTo(10, 20); drawCtx.quadraticCurveTo(10, 10, 20, 10); drawCtx.fill();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Path2D
Draw Path Calls

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Path2D	1041515.8 Ops/sec
Draw Path Calls	1076304.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmarking test case, specifically designed to compare the performance of two approaches: using the `Path2D` API for drawing paths and making repeated path drawing calls.

**Benchmark Definition**

The benchmark definition consists of a name, description (empty in this case), script preparation code, and HTML preparation code (also empty). The script preparation code initializes two canvas elements (`pathCanvas` and `drawCanvas`) with the same dimensions, creates a new `Path2D` object (`path2D`), and defines several path commands. The benchmark is designed to measure the performance of filling a path using either approach.

**Individual Test Cases**

There are two test cases:

1. **"Path2D"`**: This test case measures the performance of filling a path using the `Path2D` API.
	* The script preparation code initializes the canvas and sets up the path commands.
	* The benchmark definition simply calls the `fill()` method on the `pathCtx` object, passing the `path2D` object as an argument.
	* This test case tests the performance of using a pre-defined path object with the `Path2D` API.
2. **"Draw Path Calls"`**: This test case measures the performance of making repeated path drawing calls.
	* The script preparation code initializes the canvas and sets up the path commands.
	* The benchmark definition defines a separate path starting from a different point, then uses multiple `beginPath()`, `moveTo()`, `lineTo()`, and `quadraticCurveTo()` methods to draw the path, followed by calling the `fill()` method on the `drawCtx` object.
	* This test case tests the performance of manually drawing paths using individual drawing calls.

**Library**

The `Path2D` API is a part of the HTML5 Canvas specification. It provides a way to create and manipulate 2D paths for use in graphics rendering, without having to manually define path commands using matrix transformations or other methods.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in this benchmark, except for the `Path2D` API, which is a standard part of the HTML5 Canvas specification.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **"Path2D"`**: Pros:
	* Provides a pre-defined path object that can be used to draw paths quickly.
	* Reduces the amount of code needed to create complex paths.
Cons:
	* Requires additional memory allocation for the `path2D` object, which may impact performance in certain scenarios.
2. **"Draw Path Calls"`**: Pros:
	+ Does not require additional memory allocation or overhead.
	+ Can be more flexible and customizable than using a pre-defined path object.
Cons:
	+ Requires more code to define individual drawing calls for complex paths.

**Other Alternatives**

If you wanted to test the performance of other approaches, here are some alternatives:

* Using the `canvas` element's built-in path methods (e.g., `drawPath()`, `fillPath()`), which would eliminate the need for a custom `Path2D` API.
* Implementing a manual path drawing algorithm using matrix transformations or other methods.
* Comparing the performance of different JavaScript engines, such as SpiderMonkey (used by Firefox) and V8 (used by Chrome).

Keep in mind that these alternatives might require significant changes to the benchmark code and may not provide comparable results to the original test cases.

Related benchmarks:

fill/stroke Path2D vs repeated path drawing calls (version: 0)

Comparing performance of: Path2D vs Draw Path Calls

Created: 4 years ago by: Registered User

Jump to the latest result

Path2D

Draw Path Calls

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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