从html5画布中删除使用Javascript放置的图像

我有以下函数，它使用JavaScript在HTML5画布上绘制了一幅图像：

function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 260.5, 60);
            };
            image.src = "StartButton.png";

            var boundingBox = myGameCanvas.getBoundingClientRect();

            boundingBox.onmousemove = function(e){
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
                var pixels = context.getImageData(mouseX, mouseY, 1, 1);
            }
        }

该图像将用作一个按钮，单击该按钮时将调用另一个函数。单击按钮时我要调用的函数是：

function drawLevelOneElements(){
            image.onload = function(){
                context.drawImage(image, 50, 30, 20, 20); 


            };
            image.src = "1.png";
}

我在画布中添加了一个事件侦听器，它侦听按钮的单击，并在单击发生时调用该函数。但是，这目前工作正常，尽管调用了函数

drawLevelOneElements（）

，并将其绘制到画布上，但调用

drawStartButton（）

绘制的图像也仍然显示在画布上，因此我将两个函数的内容同时显示在画布上

我想做的是，当点击按钮时，按钮就会消失，由

drawLevelOneElements

绘制的元素将显示在画布上，而不再显示开始按钮

---

有人能告诉我如何在画布上绘制后从画布上清除由

drawStartButton（）

绘制的图像吗？

通常，您可以通过设置其宽度或高度值来清除整个画布

如果要清除画布的一个区域，可以在该区域上绘制fillRect，例如，将fillStyle设置为与画布背景色相同的颜色

 context.fillStyle = this.fill;
 context.fillRect( x, y, width, height );

---

谢谢你的回复。最后，我找到了一个名为context.clearRect（x，y，width，height）的函数；这似乎奏效了