html5 点击显示隐藏层,HTML5 Canvas和隐藏较低层

我有一个应用程序，显示在设置路线后，在屏幕上移动的彩色点。有一个保存按钮可将当前屏幕保存为.png格式。

我遇到的问题是，如果我多次单击保存图像按钮，图像不仅会显示该点击的当前位置，它们会显示点击保存按钮时的所有先前位置。

例如。如果点击1，则点位于位置1，单击2，位于位置2.图像2将显示位置1和2.第三个图像将显示位置1,2和3.

显然，分层或不清除画布存在问题，但我看不出问题。

保存代码(包含在AngularJS应用程序中)是：

$scope.saveImage = function() {

var stageWidth = jQuery("#mainStage").width();

var stageHeight = jQuery("#mainStage").height();

var html = d3.select("#mainStage")

.attr("version", 1.1)

.attr("xmlns", "http://www.w3.org/2000/svg")

.attr("width",stageWidth)

.attr("height",stageHeight)

.node().parentNode.innerHTML;

var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);

jQuery("#canvas").height(stageHeight);

jQuery("#canvas").width(stageWidth);

var canvas = document.getElementById("canvas");

var context = document.querySelector('canvas').getContext("2d");

var image = new Image;

image.src = imgsrc;

image.onload = function() {

context.drawImage(image,0,0);

var canvasdata = canvas.toDataURL("image/png");

var pngimg = '';

var a = document.createElement("a");

console.log(a);

a.download = "sample.png";

a.href = canvasdata;

a.click();

};

}

提前致谢。