HTML5 проблема с холстом?

Question

Вот мой код 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);

я ожидаю что-то вроде:
A A
B B

Но я не уверен, почему то, что я получаю:
A A
B B
Я думаю, что проблема из-за context.font продлится до следующего вызова функции. Но я не знаю, как это остановить! Любая идея!?

Answer 1

Вам нужно будет сбросить шрифт перед рисованием - попробуйте:

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);

Вот скрипка - http://jsfiddle.net/8Tuzp/

EDIT:

Если вам действительно не нравится менять шрифт дважды (я не вижу в этом проблемы), вы можете сохранить состояние холста и восстановить его, как только начертите жирный текст. Восстановите контекст холста до того, как вы изменили шрифт.

    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

Вам необходимо вернуть вес шрифта в нормальное состояние, поскольку свойства контекста сохраняются при вызовах getContext ():

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