Метод measureText () контекста Canvas 2d, который иногда дает разную ширину

Question

Я использую контекст Canvas 2d для вычисления ширины текста

Пример: canvas2DContext.measureText('Sivakumar Tadisetti')

Я использую шрифт как bold 15px "Open Sans", serif

Проблема: Иногда measureText() дает 119.4835, а иногда 115.3423 как ширину.

Почему я получаю разную ширину.Что я тут не так делаю?Пожалуйста, найдите фрагмент ниже.

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

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

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.ready обратном вызове Promise:

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>