javascript - Draw to canvas only after Google Web Font is loaded -

i using .filltext() on canvas, text of want in google web font (oswald, in case).

when page loads, text drawn canvas before font has loaded, once font loads text on canvas doesn't update, because has been drawn bitmap.

how can delay text drawing until after web font has loaded? rectangle drawn canvas still draw on $(document).ready().

i should delay .filltext() instead of overwriting default font, since design-oriented application, , fout reflects negatively on aesthetics.

here's example of how use typekit's webfontloader allow fonts time 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>