Javascript HTML5画布绘制

我在白板上用HTML5绘图。 问题是当我试图画椭圆，所以按下并拖动，许多椭圆绘制

ctx.moveTo(startX, startY + (y-startY)/2);
ctx.bezierCurveTo(startX, startY, x, startY, x, startY + (y-startY)/2);
ctx.bezierCurveTo(x, y, startX, y, startX, startY + (y-startY)/2);
ctx.stroke();

我想每次只显示一个椭圆。

---

有什么帮助吗

这可能会有所帮助-这是我的版本，只使用圆弧和缩放绘制椭圆

//画布
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
//变数
var scribble_canvasx=$（canvas）.offset（）.左；
var scribble_canvasy=$（canvas）.offset（）.top；
var scribble_last_mousex=scribble_last_mousey=0；
var scribble_mousex=scribble_mousey=0；
var scribble_mousedown=false；
//穆斯敦
$（画布）.on（'mousedown'，函数（e）{
scribble_last_mousex=parseInt（e.clientX-scribble_canvasx）；
scribble_last_mousey=parseInt（e.clientY-scribble_canvasy）；
scribble_mousedown=真；
});
//鼠标
$（画布）.on（'mouseup'，函数（e）{
scribble_mousedown=假；
});
//鼠标移动
$（画布）.on（'mousemove'，函数（e）{
scribble_mousex=parseInt（e.clientX-scribble_canvasx）；
scribble_mousey=parseInt（例如clientY-scribble_canvasy）；
如果（涂鸦鼠标向下）{
ctx.clearRect（0,0，canvas.width，canvas.height）；//清除画布
//拯救
ctx.save（）；
ctx.beginPath（）；
//动态缩放
var scalex=1*（（scribble\u mousex-scribble\u last\u mousex）/2）；
var scaley=1*（（scribble\u mousey-scribble\u last\u mousey）/2）；
ctx.scale（scalex，scaley）；
//创建椭圆
var centerx=（scribble\u last\u mousex/scalex）+1；
变量centery=（scribble\u last\u mousey/scaley）+1；
ctx.arc（centerx，centery，1,0,2*Math.PI）；
//还原并绘制
ctx.restore（）；
ctx.strokeStyle=‘黑色’；
ctx.lineWidth=5；
ctx.stroke（）；
}
//输出
$（'#output'）.html（'current:'+scrible_mousex+'，'+scrible_mousey+'
last:'+scrible_last_mousex+'，'+scrible_last_mousey+'
mousedown:'+scrible_mousedown]；
});
画布{
光标：十字线；
边框：1px实心#000000；
}
除了椭圆，还有许多其他形状。