HTML5 Canvas filltext e font-face

Question

State curiosando su StackOverflow e Google per i modi di risolvere questo problema, ma non ho avuto fortuna con una soluzione.

Che cosa sta succedendo è il mio font font-face non si carica al momento giusto. Quello che sto succedendo è che ho una tela html5 e javascript dove disegno alcune semplici cerchie con il testo di riempimento al loro interno. Ora i cerchi vengono disegnati, ma il testo in sé è sbagliato.

Suppongo che il motivo sia dato dal fatto che il carattere è stato caricato per ultimo e seleziona solo il carattere predefinito.

Ora la mia domanda è ... c'è un modo per ritardare il prelievo degli oggetti di disegno finché il carattere non viene caricato? In questo modo il font sarà pronto per l'uso e assegnerà i caratteri giusti agli oggetti canvas.

Devo sottolineare che ho un file index.php che include il mio altro file php in cui javascript e canvas vengono effettivamente disegnati.

Answer 1

Utilizzare this trick e associare un evento onerror a un elemento Image.

Demo qui: http://jsfiddle.net/g6LyK/ - funziona sull'ultimo 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, potrebbe essere necessario ascoltare l'evento onreadystatechange, controllando se document.readystate === 'completa'.