Problème de canevas HTML5?

Question

Voici mon code JS:

function Show(output, startX, startY){ 
    var c = document.getElementById("myCanvas"); 
    var context = c.getContext("2d"); 

    context.fillText ("A" , startX, startY); 

    context.font   = 'bold 20px sans-serif'; 
    context.fillText ("B" , startX, startY + 50); 
} 
Show(outputcpu, 50, 50); 
Show(outputio, 150, 50); 

ce que je pense est quelque chose comme:
AA
BB

Mais je ne sais pas pourquoi ce que je reçois est:
A A
BB
Je pense que le problème dû à context.font dure jusqu'à l'appel de fonction suivant. Mais je ne sais pas comment l'arrêter! Une idée!?

Answer 1

Vous aurez besoin de réinitialiser la police avant de tirer - essayez:

function Show(output, startX, startY){ 
    var c = document.getElementById("myCanvas"); 
    var context = c.getContext("2d"); 
    context.font = ' 20px sans-serif'; 
    context.fillText ("A" , startX, startY); 

    context.font = 'bold 20px sans-serif'; 
    context.fillText ("B" , startX, startY + 50); 
} 
Show(outputcpu, 50, 50); 
Show(outputio, 150, 50); 

est ici un violon - http://jsfiddle.net/8Tuzp/

EDIT:

Si vous n'aimez vraiment pas changer la police deux fois (je ne vois aucun problème à le faire), vous pouvez sauvegarder l'état de la toile et la restaurer une fois que vous avez dessiné le texte en gras. Rétablir le contexte de la toile avant de modifier la police.

function Show(output, startX, startY){ 
    var c = document.getElementById("myCanvas"); 
    var context = c.getContext("2d"); 
    context.save(); 
    context.fillText ("A" , startX, startY); 
    context.font = 'bold 20px sans-serif'; 
    context.fillText ("B" , startX, startY + 50); 
    context.restore(); 
} 
Show(null, 50, 50); 
Show(null, 150, 50); 

Answer 2

Vous devez régler le poids de police normale en tant que propriétés de contexte sont persistants dans les appels getContext():

context.fillText ("A" , startX, startY); 
context.font   = 'bold 20px sans-serif'; 
context.fillText ("B" , startX, startY + 50); 
context.font   = '20px sans-serif';