HTML 5 carattere canvas ignorato

Question

Sto provando a scrivere del testo su un elemento canvas, ma sembra che le opzioni dei caratteri che ho inserito siano completamente ignorate. A prescindere da ciò a cui li cambio, tutto viene fuori lo stesso, che ritengo essere il 10px sans-serif predefinito. Ecco cosa ho (questa funzione funziona a carico)

function start() 
{ 
    canvas = document.getElementById('c'); 
    ctx = canvas.getContext('2d'); 
    ctx.fillStyle = "white"; 
    ctx.font = "12px monospace"; 
    ctx.textBaseline = "top"; 
} 

Non funziona in Firefox o Chrome.

Answer 1

Come si è visto, il cambiamento ctx.font deve essere usato nella stessa funzione che sta facendo il fillText()

Questo lo fa funzionare come un fascino.

EDIT

Come richtaur menzionato nel suo commento, questa risposta è sbagliata. Il tuo contesto deve essere salvato e ripristinato usando ctx.save() e ctx.restore() come attualmente viene ripristinato quando si chiama di nuovo canvas.getContext ('2d').

Answer 2

Questo può accadere anche se si ripristina la dimensione della tela. Almeno, ho visto questo in Chrome 23 oggi.

context.font = 'bold 20px arial'; 
canvas.width = 100; 
canvas.height = 100; 
console.log(context.font); // gives '10px sans-serif'