Benchmark: Canvas fillText / strokeText

HTML Preparation code:

<canvas id="canvas1" width="400" height="400"></canvas>

<style>
 canvas { border: 1px solid black; }
</style>

<script>
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
</script>

Tests:

fillText
ctx.fillText("a", 10, 10);
strokeText
ctx.strokeText("a", 10, 10);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fillText
strokeText

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 138 on Android

View result in a separate tab

Test name	Executions per second
fillText	120218.9 Ops/sec
strokeText	113468.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark focuses on testing the performance of two different methods of rendering text on an HTML5 canvas using the 2D rendering context in JavaScript: `fillText` and `strokeText`. Both methods are part of the Canvas API, which provides a rich set of functionalities for drawing and manipulating graphics on a web page.

### Test Cases

1. **fillText**:
   - **Benchmark Definition**: `ctx.fillText("a", 10, 10);`
   - **Description**: This method is used to draw filled text on the canvas. Filled text means that the interior of the characters is filled with color.
  
2. **strokeText**:
   - **Benchmark Definition**: `ctx.strokeText("a", 10, 10);`
   - **Description**: This method is used to draw the outline of text on the canvas. Stroked text means that only the borders of the characters are drawn, without any fill.

### Comparisons and Performance Metrics

The benchmark measures the execution speed, denoted as "Executions Per Second," for both methods on a specific device/browser combination (Chrome Mobile on Android). Here are the results:

- **`fillText` Executions Per Second**: 359,885.75
- **`strokeText` Executions Per Second**: 295,104.625

### Pros and Cons of Each Approach

#### `fillText`
- **Pros**: 
  - Faster execution compared to `strokeText`, as indicated by the benchmark results.
  - Useful for situations where solid text representation is needed (e.g., labels, scores).
  
- **Cons**: 
  - Does not provide an outline or border for text, which may not be suitable for all aesthetic requirements.

#### `strokeText`
- **Pros**: 
  - Allows for more stylistic versatility since it provides an outline rather than a filled representation.
  - Useful for creating effects where an outlined text may be more visually appealing or required for readability against complex backgrounds.

- **Cons**: 
  - Slower execution compared to `fillText`.
  - Requires careful consideration of stroke color and width to ensure the text stands out against the background.

### Other Considerations

- **Use Case**: The choice between `fillText` and `strokeText` may depend on the application's requirements. If text safety (visibility against various backgrounds) is a concern, developers might prefer `strokeText`. For performance-sensitive applications where quick rendering is paramount, `fillText` may be the better choice.
  
- **Device and Environment Variability**: Benchmark results can vary across different devices and browsers, so it's advisable to test both methods in the target environment to ensure optimal performance and visual quality.

### Alternatives

- **CSS for Text Rendering**: Instead of using HTML Canvas, developers can also use CSS properties to style text directly on the webpage. While this is not suitable for dynamic graphics or games, it can enhance performance for static text.
  
- **SVG (Scalable Vector Graphics)**: SVG allows for more complex text and graphics manipulation, which can be more flexible but may also have a steeper learning curve. It also scales better on different resolutions compared to canvas.

- **WebGL**: For advanced graphic applications, especially those requiring 3D rendering, WebGL may be more appropriate, as it offers hardware-accelerated graphics performance.

Overall, the benchmark provides valuable insights into the performance characteristics of text rendering methods on web applications, aiding developers in making informed choices based on their specific needs.

Related benchmarks:

Canvas fillText / strokeText (version: 1)

Comparing performance of: fillText vs strokeText

Created: 11 months ago by: Guest

Jump to the latest result

fillText

strokeText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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