Javascript 无法正确更新html5画布

以下是我的问题的简单演示：

我希望框中的数字增加输入的数字（对于farkle游戏）。 这看起来很简单，但我找不到任何可行的方法。 我当前的“更新”功能来自 我用错了吗

我的最终目标是将右边的字段用作输入，而不是提示，

---

但这可能偏离了主题。

看起来画布只有初始更新。调用update（）函数，但只更新变量计数，不在该点之后更新画布

    var elem = document.getElementById('tallyDisp');
var tally = 0;


function update() {
    tally += prompt("Update");
    window.setTimeout(100, update);
    if (elem && elem.getContext) {
        var context = elem.getContext('2d');
        if (context) {
            context.fillStyle = '#9f9';
            context.fillRect(0, 0, 300, 200);
            context.fillStyle = '#00f';
            context.font = 'bold 100px sans-serif';
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.fillText(tally, 150, 100);
        }
    }
}
update();

//function ask() {
//    tally += parsInt(prompt("Ask"));
//            context.fillStyle = '#9f9'; 
//        context.fillRect(0, 0, 300, 200);
//        context.fillStyle = '#00f';
//        context.font = 'italic 100px sans-serif';
//        context.textAlign = 'center';
//        context.textBaseline = 'middle';
//        context.fillText(tally, 150, 100);
//}
//ask();

---

我不确定这是否是一个好的做法，但我以前见过这个

---

context.width=context.width；//清除画布

此外，可能会将行更改为：tally+=Numer（提示（“更新”）；否则它会将其附加到字符串的末尾，而不是将其添加到总数中。当我放入“Numer”行时，它不再给出提示框。帕森特也是这样。