canvas.measureText() with varying input lengths

Benchmark created on

Preparation HTML

<div id="benchmark-container">
  <canvas id="benchmark-canvas" width="800" height="150"></canvas>
</div>

Setup

const canvas = document.getElementById('benchmark-canvas');
const ctx = canvas.getContext('2d');
ctx.font = '16px Arial';

// Generate test strings of different lengths
function generateString(length) {
  return 'x'.repeat(length);
}

const testStrings = {
  tiny: generateString(10),
  small: generateString(100),
  medium: generateString(1000),
  large: generateString(10000),
  huge: generateString(100000)
};

Test runner

Ready to run.

Testing in
TestOps/sec
len: 10
ctx.measureText(testStrings.tiny);
ready
len: 100
ctx.measureText(testStrings.small);
ready
len: 1000
ctx.measureText(testStrings.medium);
ready
len: 10000
ctx.measureText(testStrings.large);
ready
len: 100000
ctx.measureText(testStrings.huge);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.