Рисовать на холст только после загрузки Google Web Font

Question

Я использую .fillText() на холсте, текст которого я хочу использовать в веб-шрифте Google (Освальд, в моем случае).

Когда страница загружается, текст рисуется на холсте до загрузки шрифта, но, очевидно, после загрузки шрифта текст на холсте не обновляется, поскольку он уже был нарисован как растровое изображение.

Как я могу отложить этот текст до завершения загрузки веб-шрифта? Прямоугольник также нарисован на холсте, который я все еще хотел бы нарисовать немедленно $(document).ready(),

Я должен сказать, что я хотел бы отложить .fillText() вместо того, чтобы перезаписывать шрифт по умолчанию, так как это приложение, ориентированное на дизайн, а FOUT отрицательно влияет на эстетику.

Answer 1

Вот пример того, как использовать TypeFit WebFontLoader, чтобы время загрузки шрифтов перед их использованием:

// load google font == Monoton
WebFontConfig = {
  google:{ families: ['Monoton'] },
  active: function(){start();},
};
(function(){
  var wf = document.createElement("script");
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js';
  wf.async = 'true';
  document.head.appendChild(wf);
})();


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


function start(){
  ctx.font = '50px Monoton';
  ctx.textBaseline = 'top';
  ctx.fillText('No', 20, 10);
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>