Benchmark: setFont measureText OffscreenCanvas vs Canvas

Script Preparation code:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var offscreenCanvas = new OffscreenCanvas(0, 0);
var offscreenContext = offscreenCanvas.getContext('2d');

Tests:

Canvas
context.measureText('M');
Offscreen
offscreenContext.measureText('M');
Canvas font
context.font = 'bold 48px serif';
Offscreen font
offscreenContext.font = 'bold 48px serif';
Canvas textBaseline
context.textBaseline = "hanging";
Offscreen textBaseline
offscreenContext.textBaseline = "hanging";
Canvas textAlign
context.textAlign = "center";
Offscreen textAlign
offscreenContext.textAlign = "center";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Canvas
Offscreen
Canvas font
Offscreen font
Canvas textBaseline
Offscreen textBaseline
Canvas textAlign
Offscreen textAlign

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Canvas	2349423.0 Ops/sec
Offscreen	414221.1 Ops/sec
Canvas font	6734483.0 Ops/sec
Offscreen font	15818720.0 Ops/sec
Canvas textBaseline	13388220.0 Ops/sec
Offscreen textBaseline	13430470.0 Ops/sec
Canvas textAlign	13676690.0 Ops/sec
Offscreen textAlign	12744400.0 Ops/sec

setFont measureText OffscreenCanvas vs Canvas (version: 2)

DomCanvas vs OffscreenCanvas

Comparing performance of: Canvas vs Offscreen vs Canvas font vs Offscreen font vs Canvas textBaseline vs Offscreen textBaseline vs Canvas textAlign vs Offscreen textAlign

Created: 3 years ago by: Registered User

Jump to the latest result

Canvas

Offscreen

Canvas font

Offscreen font

Canvas textBaseline

Offscreen textBaseline

Canvas textAlign

Offscreen textAlign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A