Draw to canvas only after Google Web Font is loaded

Question

I am using .fillText() on a canvas, the text of which I want to be in a Google Web Font (Oswald, in my case).

When the page loads, the text is drawn to canvas before the font has loaded, but obviously once the font loads the text on the canvas doesn't update, because it has already been drawn as a bitmap.

How can I delay this text drawing until after the Web Font has loaded? A rectangle is also drawn to the canvas which I would still like to draw immediately on $(document).ready().

I should say that I would like to delay the .fillText() instead of overwriting the default font, since it is a design-oriented application, and the FOUT reflects negatively on the aesthetics.

Chantress

Answer 1

Here's an example of how to use TypeKit's WebFontLoader to allow fonts time to load before using them:

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

Lucillalucille

Thanks. I think my problem was that my WebFontLoader was separate to my main JavaScript file, and your example showed me what I was doing wrong :) – Chantress

this question is being asked a lot, so far this is the working solution i have found, +1 for that :) – Bronchial