javascript - measureText() method of Canvas 2d context giving different widths sometimes

Question

I am using Canvas 2d context to calculate the width of the text

Ex: canvas2DContext.measureText('Sivakumar Tadisetti')

I am using font as bold 15px "Open Sans", serif

Issue: Sometimes measureText() is giving 119.4835 and sometimes 115.3423 as widths.

Why I am getting different widths. What I am doing wrong here?. Please find the snippet from below.

var canvas = document.createElement('canvas');
var canvas2DContext = canvas.getContext('2d');

var textWidth = canvas2DContext.measureText("Sivakumar Tadisetti").width;

标签： javascriptcanvashtml5-canvas

Answer 1

有点盲目，但对我来说，这听起来像你没有正确等待你的字体被加载：

const ctx = canvas.getContext('2d');
ctx.font = 'bold 15px "Open Sans", serif'

const before_load = ctx.measureText("Sivakumar Tadisetti").width;
console.log('before', before_load);

// load the font
document.fonts.ready
  .then(() => {
    ctx.font = 'bold 15px "Open Sans", serif'
    const after_load = ctx.measureText("Sivakumar Tadisetti").width;
    console.log('after', after_load);
  });

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
<canvas id="canvas"></canvas>

为避免这种情况，您可以在document.fonts.readyPromise 的回调中执行代码：

document.fonts.ready.then(startYourCode);

document.fonts.ready.then(() => {
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 15px "Open Sans", serif'

  const textWidth= ctx.measureText("Sivakumar Tadisetti").width;
  console.log(textWidth);
});

#canvas { font-family: "Open Sans"; }

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<canvas id="canvas"></canvas>