Javascript HTML5更新画布再次重复和缩放

我第一次尝试在html5中使用画布，我遇到了一个问题，我希望这个问题很容易解决，但我找不到答案

基本上，我可以在加载文档时在画布上绘制一个形状，然后我想向其中添加一些文本并更新画布。画布以0.5的比例开始，但当我尝试添加文本并重新绘制画布时，它会以0.25的比例在现有画布上绘制

所以我相信画布是在原始画布的顶部重新绘制的，比例是堆叠的

下面是我所做工作的简化版本：

$(document).ready(function() {
    playerID = "";
    createCanvas();
}


function createCanvas(){

    var canvas = document.getElementById("player1");
    var context = canvas.getContext("2d");

    context.scale(0.5, 0.5);

  //code to draw the shape


    var x = 28;
    var y = 45;
    context.font = "20pt Calibri";
context.fillStyle = "#ffffff";
context.fillText(''+playerID+'', x, y);

  };


function playerNumber(){
 playerID = 5;
 createCanvas();
 }

在我再次绘制画布之前，是否有某种方法可以清除画布，从而停止此问题，或者我是否可以更新/刷新画布

---

我真的不确定正确的方法，任何帮助都会很好。谢谢。

问题是因为您将所有代码放在一个函数中。大禁忌。
将其分为以下两部分：

创建：

$(document).ready(function() {            
    var canvas = document.getElementById("player1");
    var context = canvas.getContext("2d");

    context.scale(0.5, 0.5);
}

添加文本：

function playerNumber(){      
    var playerID = 5;  

    var canvas = document.getElementById("player1");
    var context = canvas.getContext("2d");

    var x = 28;
    var y = 45;


    context.font = "20pt Calibri";
    context.fillStyle = "#ffffff";
    context.fillText(''+playerID+'', x, y);

}