Run results for: measureText stuff

Test name	Executions per second
✓ byChars	469 Ops/sec
measureText via OffsetScreenCanvas	344 Ops/sec
measureText via Canvas	337 Ops/sec

Script Preparation code:

const font = '12px sans-serif';
const charset = [...Array(100)].map((_, i) => String.fromCharCode(0x200 + i));
const testTexts = [...Array(50)].map(() => randomString(10, 30));

function randomString(minLen, maxLen) {
  const len = Math.floor(Math.random() * (maxLen - minLen + 1)) + minLen;
  let result = '';
  for (let i = 0; i < len; i++) {
    result += charset[Math.floor(Math.random() * charset.length)];
  }
  return result;
}

function charWidth(c, ctx, cache) {
  return cache[c] || (cache[c] = ctx.measureText(c).width);
}

function textWidth(txt, ctx, cache) {
  let w = 0;
  txt = txt + '';
  for (const c of txt) {
    w += charWidth(c, ctx, cache);
  }
  return w;
}

function cachedMeasureText(txt, ctx, cache) {
  return cache[txt] || (cache[txt] = ctx.measureText(txt).width);
}

window.measureText = (() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  return (txt) => ctx.measureText(txt);
})();

window.oscMeasureText = (() => {
  const canvas = new window.OffscreenCanvas(0, 0);
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  return (txt) => ctx.measureText(txt);
})();

window.byChars = (() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  charWidthCache = {};
  return (txt) => textWidth(txt, ctx, charWidthCache);
})();

window.byStrings = (() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  return (stringWidthCache, txt) => cachedMeasureText(txt, ctx, stringWidthCache);
})();

Tests:

measureText via Canvas
for (let i = 0; i < 50; i++) testTexts.map(txt => measureText(txt))
measureText via OffsetScreenCanvas
for (let i = 0; i < 50; i++) testTexts.map(txt => oscMeasureText(txt))
byChars
for (let i = 0; i < 50; i++) testTexts.map(txt => byChars(txt))
byStrings
(x = {}); for (let i = 0; i < 50; i++) testTexts.map(txt => byStrings(x, txt))

Run results for: measureText stuff

measureText via Canvas

measureText via OffsetScreenCanvas

byChars

byStrings