Benchmark: Canvas gradient perf

HTML Preparation code:

<canvas id="canvas1" width="512" height="512"></canvas>

<style>
 canvas { border: 1px solid black; }
</style>

<script>
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

var grad = ctx.createLinearGradient(0, 0, 1, 512);
grad.addColorStop(0, 'red');
grad.addColorStop(0.5, 'rgba(0,0,255,0.5)');
grad.addColorStop(1, 'lime');

</script>

Tests:

Create
for (var i = 0; i < 10; i++) { var grad2 = ctx.createLinearGradient(0, 0, 1, 512); grad2.addColorStop(0, 'red'); grad2.addColorStop(0.5, 'rgba(0,0,255,0.5)'); grad2.addColorStop(1, 'lime'); ctx.fillStyle = grad2; ctx.fillRect(0,0,512,512); }
reuse
for (var i = 0; i < 10; i++) { ctx.fillStyle = grad; ctx.fillRect(0,0,512,512); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create
reuse

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Test name	Executions per second
Create	22940.5 Ops/sec
reuse	35117.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**What is being tested?**

The benchmark is testing the performance of two different approaches to drawing a linear gradient on a canvas element in JavaScript:

1. **Creating a new gradient instance**: The first test case, "Create", creates a new `LinearGradient` object and assigns it to the `grad2` variable.
2. **Reusing an existing gradient instance**: The second test case, "reuse", reuses the same `LinearGradient` object that was created in the previous step.

**Options compared**

The benchmark is comparing the performance of these two approaches:

* Creating a new `LinearGradient` object each time it's needed (`Create`)
* Reusing an existing `LinearGradient` object and updating its properties as needed (`Reuse`)

**Pros and Cons of each approach**

**Creating a new gradient instance (Create)**

Pros:

* Easy to understand and implement
* Allows for easy modification or extension of the gradient definition

Cons:

* Creates a new object each time, which can lead to performance overhead due to memory allocation and garbage collection.
* May lead to slower execution times if the same gradient is used multiple times.

**Reusing an existing gradient instance (Reuse)**

Pros:

* Can be faster than creating a new object each time, since there's no need for memory allocation or garbage collection.
* Reduces the number of objects created and destroyed, which can improve performance in some cases.

Cons:

* Requires careful management of the gradient object to avoid modifying its properties unexpectedly.
* May lead to slower execution times if the gradient is not properly optimized or if there are too many updates.

**Other considerations**

The benchmark also takes into account other factors that may affect performance, such as:

* The size of the canvas element (512x512 pixels)
* The number of iterations (10) in each test case
* The device platform and operating system used to run the benchmarks

**Library**

In this benchmark, the `Canvas` API is used to create and manipulate the gradient. The `LinearGradient` class is a part of the W3C Canvas API specification.

**Special JS feature or syntax**

There are no special JavaScript features or syntax used in this benchmark. It only relies on standard JavaScript concepts, such as variables, loops, and object methods (e.g., `createLinearGradient`, `addColorStop`).

Related benchmarks:

Canvas gradient perf (version: 0)

Comparing performance of: Create vs reuse

Created: 8 years ago by: Guest

Jump to the latest result

Create

reuse

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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