Нарисуйте только на холсте только после загрузки веб-шрифта Google

Question

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

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

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

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

Answer 1

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

// 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>