Benchmark: save&restore vs manual

HTML Preparation code:

<canvas id="canvasOne" width="400" height="400"></canvas>
<canvas id="canvasTwo" width="400" height="400"></canvas>

Script Preparation code:

var canvasOne = document.getElementById("canvasOne");
var ctxOne = canvasOne.getContext("2d");

var canvasTwo = document.getElementById("canvasTwo");
var ctxTwo = canvasTwo.getContext("2d");

Tests:

save/restore
ctxOne.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxOne.fillRect(0, 0, 400, 400); ctxOne.save(); ctxOne.beginPath(); ctxOne.moveTo(Math.random() * 400, Math.random() * 400); ctxOne.lineTo(Math.random() * 400, Math.random() * 400); ctxOne.shadowBlur = 20; ctxOne.shadowOffsetX = 10; ctxOne.shadowOffsetY = 10; ctxOne.shadowColor = '#8E44AD'; ctxOne.strokeStyle = '#8E44AD'; ctxOne.lineWidth = 1; ctxOne.stroke(); ctxOne.restore(); ctxOne.beginPath(); ctxOne.fillStyle = '#52BE80'; ctxOne.arc(Math.random() * 400, Math.random() * 400, 20, 0, Math.PI * 2, true); ctxOne.fill();
manual
ctxTwo.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxTwo.fillRect(0, 0, 400, 400); ctxTwo.beginPath(); ctxTwo.moveTo(Math.random() * 400, Math.random() * 400); ctxTwo.lineTo(Math.random() * 400, Math.random() * 400); ctxTwo.shadowBlur = 20; ctxTwo.shadowOffsetX = 10; ctxTwo.shadowOffsetY = 10; ctxTwo.shadowColor = '#8E44AD'; ctxTwo.strokeStyle = '#8E44AD'; ctxTwo.lineWidth = 1; ctxTwo.stroke(); ctxTwo.shadowBlur = 0; ctxTwo.shadowOffsetX = 0; ctxTwo.shadowOffsetY = 0; ctxTwo.shadowColor = 'rgba(0, 0, 0, 0)'; ctxTwo.beginPath(); ctxTwo.fillStyle = '#52BE80'; ctxTwo.arc(Math.random() * 400, Math.random() * 400, 20, 0, Math.PI * 2, true); ctxTwo.fill();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
save/restore
manual

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 80 on Windows

View result in a separate tab

Test name	Executions per second
save/restore	73906.1 Ops/sec
manual	81709.6 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark definition and test cases to explain what's being tested.

**Benchmark Definition**

The benchmark is called "save&restore vs manual" and it measures the performance difference between two approaches: using the `save()` and `restore()` methods for 2D graphics, and performing similar operations manually.

**Script Preparation Code**

The script prepares two canvases (`canvasOne` and `canvasTwo`) with the same dimensions. It sets up the 2D drawing context for both canvases, which allows us to draw on them.

**Html Preparation Code**

The HTML code creates two separate `<canvas>` elements with identical attributes (width and height).

**Individual Test Cases**

There are two test cases:

1. **"save/restore"`: This test case uses the `save()` and `restore()` methods for 2D graphics. Here's what happens:
	* The drawing context (`ctxOne`) is saved, which sets up the state for a new drawing operation.
	* A random point is generated within the canvas bounds using `Math.random() * 400`.
	* A line is drawn from this point to another random point using `ctxTwo.lineTo()` and `ctxTwo.stroke()`.
	* The shadow properties are set for the line (`shadowBlur`, `shadowOffsetX`, `shadowOffsetY`, and `shadowColor`).
	* The drawing context is restored to its previous state.
	* A new shape (an arc) is drawn using `ctxOne.arc()` and `ctxOne.fill()`.
2. **"manual"`: This test case performs the same operations as the "save/restore" test, but without using the `save()` and `restore()` methods:
	* The drawing context (`ctxTwo`) is used to draw a line from a random point to another random point using `ctxTwo.lineTo()` and `ctxTwo.stroke()`.
	* Shadow properties are set for the line.
	* A new shape (an arc) is drawn using `ctxTwo.arc()` and `ctxTwo.fill()`.

**Comparison**

The benchmark measures the execution time of both approaches. The "save/restore" test case uses the `save()` and `restore()` methods, while the "manual" test case performs similar operations manually.

**Pros and Cons:**

* **"Save&Restore"`:
	+ Pros: Less code is written, which can reduce compilation and execution time.
	+ Cons: The browser has to perform additional bookkeeping, which might add some overhead.
* **"Manual"`:
	+ Pros: No additional bookkeeping is needed, so the browser doesn't have to do extra work.
	+ Cons: More code needs to be written, which can increase compilation and execution time.

**Library and Special JS Features**

The benchmark uses the `Canvas` API, which is a built-in feature in modern browsers. The special JS features used here are:

* `save()` and `restore()`: These methods allow you to save and restore the state of the 2D drawing context.
* Shadow effects: Some browsers (like Chrome) support shadow effects using CSS3. The benchmark tests if these effects are properly supported.

**Other Alternatives**

If you want to measure the performance difference between other approaches, you might consider:

* Using a different graphics library, like WebGL or Three.js.
* Implementing custom 2D drawing algorithms instead of relying on built-in browser APIs.
* Comparing the performance of different compilers or transpilers for JavaScript.

Keep in mind that each approach has its own trade-offs and potential overhead. The benchmark can help identify which approach is most efficient, but it's essential to consider the specific requirements and constraints of your project when choosing a method.

Related benchmarks:

save&restore vs manual (version: 0)

Comparing performance of: save/restore vs manual

Created: 4 years ago by: Guest

Jump to the latest result

save/restore

manual

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