Benchmark: DrawStroke bench radius

HTML Preparation code:

<canvas id='master' width='100' height='100'></canvas>
<canvas id='cached' width='100' height='100'></canvas>

Script Preparation code:

var master = document.getElementById('master');
var masterctx = master.getContext('2d');

var cached = document.getElementById('cached');
var cachedctx = master.getContext('2d');

var drawRoundRect = (
  ctx,
  x,
  y,
  width,
  height,
  stroke,
  radius
) => {
  let cornerRadius = { upperLeft: 0, upperRight: 0, lowerLeft: 0, lowerRight: 0 };
  if (typeof radius === 'object') {
    const radiusKeys = Object.keys(radius);
    for (const side of radiusKeys) {
      cornerRadius[side] = radius[side];
    }
  } else {
    cornerRadius = { upperLeft: radius, upperRight: radius, lowerLeft: radius, lowerRight: radius };
  }

  ctx.save();

  if (stroke) {
    radiusPath(ctx, x, cornerRadius, y, width, height);
    ctx.clip();
    ctx.lineWidth *= 2;
  }

  radiusPath(ctx, x, cornerRadius, y, width, height);
  if (stroke) {
    ctx.stroke();
  } else {
    ctx.fill();
  }

  ctx.restore();
};

function radiusPath(
  ctx,
  x,
  cornerRadius,
  y,
  width,
  height
) {
  ctx.beginPath();
  ctx.moveTo(x + cornerRadius.upperLeft, y);
  ctx.lineTo(x + width - cornerRadius.upperRight, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + cornerRadius.upperRight);
  ctx.lineTo(x + width, y + height - cornerRadius.lowerRight);
  ctx.quadraticCurveTo(x + width, y + height, x + width - cornerRadius.lowerRight, y + height);
  ctx.lineTo(x + cornerRadius.lowerLeft, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - cornerRadius.lowerLeft);
  ctx.lineTo(x, y + cornerRadius.upperLeft);
  ctx.quadraticCurveTo(x, y, x + cornerRadius.upperLeft, y);
  ctx.closePath();
}
drawRoundRect(cachedctx, 0, 0, 100, 100, 5)

Tests:

Cached
masterctx.drawImage(cached,0,0);
draw rect round border
drawRoundRect(masterctx, 0, 0, 100, 100, 5)
draw rect
masterctx.strokeRect(0, 0, 100, 100);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Cached
draw rect round border
draw rect

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 103 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Cached	575429.6 Ops/sec
draw rect round border	968810.6 Ops/sec
draw rect	102.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Definition**

The benchmark is testing the performance of drawing shapes on a 2D canvas using JavaScript. The `DrawStroke bench radius` benchmark definition represents the common script that is used to draw a round rectangle with a border (also known as "stroke") on a canvas.

**Options Compared**

There are three options being compared:

1. **Master Context**: This option uses the master context (`masterctx`) to draw the shape, which means it's using the same context for all drawings.
2. **Cached Context**: This option uses a cached context (`cachedctx`) to draw the shape, which means it's using a separate context that is reused for each drawing.
3. **No Stroke**: This option draws the shape without a border (no stroke).

**Pros and Cons of Each Approach**

* **Master Context**:
	+ Pros: Can be faster since the context is only created once.
	+ Cons: May lead to slower performance due to increased overhead of creating and managing multiple contexts.
* **Cached Context**:
	+ Pros: Reuses the same context for each drawing, which can reduce overhead.
	+ Cons: Requires more memory since each drawing creates a new context object.
* **No Stroke**:
	+ Pros: Does not require any extra calculations or rendering, which can be faster.
	+ Cons: Does not accurately represent real-world scenarios where strokes are used.

**Library and Purpose**

The `canvas` element is used to render the shapes. The `Context2D` object is a part of the HTML5 Canvas API, which provides methods for drawing shapes, text, and other graphics on the canvas.

**Special JS Feature or Syntax**

There doesn't seem to be any special JavaScript features or syntax being used in this benchmark.

**Other Alternatives**

If you wanted to test similar benchmarks, you could consider using different libraries or APIs that provide 2D rendering capabilities. Some alternatives include:

* `SVG` (Scalable Vector Graphics): A vector-based graphics format that can be used for drawing shapes.
* `P5.js`: A lightweight JavaScript library for creating interactive visualizations.
* `Fabric.js`: A 2D drawing and manipulation library.

Keep in mind that the specific implementation details may vary depending on the chosen alternative.

Related benchmarks:

DrawStroke bench radius (version: 0)

stroke with border

Comparing performance of: Cached vs draw rect round border vs draw rect

Created: 2 years ago by: Guest

Jump to the latest result

Cached

draw rect round border

draw rect

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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