Benchmark: Untransform vs save canvas

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

let ctx = (typeof OffscreenCanvas === 'function' ? new OffscreenCanvas(150, 300) : document.createElement('canvas'))
    .getContext('2d')
let translate = 10
let scale = 30
let rotation = 1/3
function doStuff() {
   // Change some stuff...
    ctx.translate(translate, translate)
    ctx.scale(scale, scale)
    ctx.rotate(rotation)
}

Tests:

Save
ctx.save() doStuff() ctx.arc(0,0,30,0,6) ctx.restore()
Undo
doStuff() ctx.arc(0,0,30,0,6) ctx.rotate(-rotation) ctx.scale(1/scale,1/scale) ctx.translate(-translate,-translate)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Save
Undo

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

Test name	Executions per second
Save	2399.9 Ops/sec
Undo	729.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark presented is a comparison of two different approaches to perform graphic manipulations on a `canvas` using the Canvas API in JavaScript. The two test cases—**"Save"** and **"Undo"**—analyze the performance of saving the current canvas state versus manually undoing transformations applied to the canvas.

### Approach Details

#### 1. Save Approach

**Benchmark Definition:**
```javascript
ctx.save()
doStuff()
ctx.arc(0,0,30,0,6)
ctx.restore()
```
- **What It Does:**
  - `ctx.save()` captures the current state of the canvas.
  - `doStuff()` applies transformations (translate, scale, rotate) to the canvas context.
  - `ctx.arc(...)` draws an arc on the canvas.
  - `ctx.restore()` reverts the canvas context to the state captured by `save()`, effectively undoing the transformations applied by `doStuff()`.

**Pros:**
- Simplifies state management for canvas transformations, as it allows developers to work with preserved states without needing to manually reverse each transformation.
- More readable and maintainable code when dealing with multiple transformations.

**Cons:**
- Saving and restoring states may involve overhead, especially if done excessively or in rapid succession. The performance may degrade if the operations are executed frequently.

#### 2. Undo Approach

**Benchmark Definition:**
```javascript
doStuff()
ctx.arc(0,0,30,0,6)
ctx.rotate(-rotation)
ctx.scale(1/scale,1/scale)
ctx.translate(-translate,-translate)
```
- **What It Does:**
  - `doStuff()` applies the same transformations as in the Save approach.
  - `ctx.arc(...)` draws an arc on the canvas after transformations are applied.
  - The subsequent rotation, scaling, and translation calls manually reverse each transformation applied in `doStuff()`.

**Pros:**
- Avoids the overhead of saving/restoring states, which could be beneficial in scenarios where performance is critical and transformations are predictable.

**Cons:**
- More complex code: each transformation must be manually reversed, leading to potential bugs and decreased code maintainability.
- Can make the code harder to read and follow when applying multiple transformations.

### Performance Results

According to the latest benchmark results:
- **Save**: Executions per second - **2399.93**
- **Undo**: Executions per second - **729.30**

These results indicate that the **Save** approach significantly outperforms the **Undo** approach in this benchmark scenario, making it the more efficient option for handling canvas transformations in this context.

### Other Considerations

1. **Use Case:** The choice between these two approaches largely depends on the specific use case. If there are many transformations being applied and reverted, the `save` and `restore` methods might offer better performance and maintainability. Conversely, if transformations are minimal and straightforward, manual undoing could be more efficient.

2. **Browser Differences:** The performance might vary across different browsers and environments due to how implementation details differ across JavaScript engines.

3. **Device Capabilities:** Performance can also be affected by the device's capability, like CPU speed or GPU support, making it essential to consider the target platform's specifications.

### Alternatives

- **WebGL:** For more complex and performance-sensitive graphics rendering, WebGL could be an alternative, as it leverages the GPU for rendering, leading to potentially higher performance when rendering complex scenes or when many objects are involved.
  
- **SVG (Scalable Vector Graphics):** For certain applications, SVG can be a better option when dealing with vector graphics, as it allows for scalable, resolution-independent graphics without losing quality.

- **CSS Transformations:** If the task is more about visual manipulation of DOM elements, utilizing CSS transformations may offer a simpler and often more efficient way to achieve similar results without directly manipulating the canvas.

### Conclusion

In this benchmark, the "Save" approach yields superior performance compared to the manual "Undo" method, which has significant implications for scenarios requiring frequent canvas manipulation. The decision on which method to employ should consider both performance and the complexity of operations involved.

Related benchmarks:

Untransform vs save canvas (version: 1)

Comparing performance of: Save vs Undo

Created: 2 months ago by: Guest

Jump to the latest result

Save

Undo

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):