Javascript绘制画布

我的代码有问题。这是一个简单的画布元素画圆圈。有两件事我搞不清楚。第一个是如何在按住鼠标左键的同时连续绘制圆（而不是一次绘制一个圆）。“Onmousehold”在这里似乎不起作用。其次，是否可以从控制台中消除第一个参考错误？它仅在尚未指定单击的坐标时显示一次。我的代码在这里：

var outer=document.getElementById（“outer”）；
var ctx=outer.getContext（“2d”）；
函数getMousePos（e）{
var cursorX=e.clientX；
var cursorY=e.clientY；
x=游标x；
y=粗略；
}
函数显示框（）{
ctx.beginPath（）；
ctx.arc（x，y，20,0,2*Math.PI）；
ctx.stroke（）；
控制台日志（x，y）；
}
addEventListener（“单击”，获取鼠标点）；
外部.addEventListener（“单击”，显示框）；
外部.addEventListener（“鼠标向下”，显示框）
#外部{
位置：相对位置；
溢出：隐藏；
边框：1px纯绿色；
}
.弹出窗口{
宽度：50px；
高度：50px；
边界半径：25px；
背景颜色：蓝色；
位置：绝对位置；
}

请参见：

当
mousedown
发生时，您需要为
mousemove
附加事件，同样地，在
mouseup
上删除那些
事件：）谢谢Naeem@przemoo83.. 如果答案有帮助，请投票并接受：）
var outer = document.getElementById("outer");
var ctx = outer.getContext("2d");
function getMousePos(e) {
    var cursorX = e.clientX; 
    var cursorY = e.clientY; 
    x = cursorX;
    y = cursorY;
}
function showBox() {
ctx.beginPath();
ctx.arc(x,y,20,0,2*Math.PI);
ctx.stroke();
console.log(x,y);
    outer.addEventListener("mousemove",getMousePos);
outer.addEventListener("mousemove",showBox)
    outer.addEventListener("mouseup",removelisteners);

}
function removelisteners() {

    outer.removeEventListener("mousemove",getMousePos);
outer.removeEventListener("mousemove",showBox)


}
outer.addEventListener("mousedown",getMousePos);
outer.addEventListener("mousedown",showBox);

;