HTML HTML5 filltext y font-face

Question

He estado buscando en stackoverflow y en google formas de resolver este problema, pero no he tenido mucha suerte con una solución.

Lo que está sucediendo es que la fuente de la fuente no se está cargando en el momento correcto. Lo que estoy pasando es que tengo un lienzo html5 y javascript donde estoy dibujando algunos círculos simples con texto de relleno dentro de ellos. Ahora los círculos se están dibujando pero el texto en sí es la fuente incorrecta.

Supongo que el motivo es porque la fuente se carga por última vez y solo selecciona la fuente predeterminada.

Ahora mi pregunta es ... ¿hay alguna forma de retrasar los objetos de lienzo que se dibujan hasta que se cargue la fuente? De esta forma, la fuente estará lista para usar y asignará las fuentes correctas a los objetos de lienzo.

Debo señalar que tengo un archivo index.php que incluye mi otro archivo php donde javascript y canvas se están dibujando.

Answer 1

Utilice this trick y vincule un evento onerror a un elemento Image.

Demo aquí: http://jsfiddle.net/g6LyK/ - funciona con la última versión de Chrome.

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var link = document.createElement('link'); 
link.rel = 'stylesheet'; 
link.type = 'text/css'; 
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'; 
document.getElementsByTagName('head')[0].appendChild(link); 

// Trick from https://stackoverflow.com/questions/2635814/ 
var image = new Image; 
image.src = link.href; 
image.onerror = function() { 
    ctx.font = '50px "Vast Shadow"'; 
    ctx.textBaseline = 'top'; 
    ctx.fillText('Hello!', 20, 10); 
}; 

Answer 2

According to an answer to this question, puede que necesite escuchar el evento onreadystatechange, verificando si document.readystate === 'complete'.