Run results for: Measure text

Run details:

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

Browser: Chrome 91

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Canvas	526424.5 Ops/sec
OffscreenCanvas	490879.7 Ops/sec
offsetWidth	531673.9 Ops/sec
getBoundingClientRect	535685.6 Ops/sec

HTML Preparation code:

<div></div>

Script Preparation code:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d', { alpha: false });
context.font = 'bold 48px serif';

var offscreenCanvas = new OffscreenCanvas(0, 0);
var offscreenContext = offscreenCanvas.getContext('2d', { alpha: false });
offscreenContext.font = 'bold 48px serif';

var div = document.querySelector('div')

Tests:

Canvas
context.measureText("TESTM").width
OffscreenCanvas
offscreenContext.measureText("TESTM").width
offsetWidth
div.textContent = "TESTM" div.offsetWidth
getBoundingClientRect
div.textContent = "TESTM" div.getBoundingClientRect().width

Run results for: Measure text

Canvas

OffscreenCanvas

offsetWidth

getBoundingClientRect