无法使用鼠标事件在JavaScript中的画布上绘制一个完整的圆圈

Question

I want to draw a simple circle on a canvas using mouse events, but what I am getting is partial circles, half circles, and sometimes a full one. The rectangle is working fine.Picture of resulting partial circles is attached. enter image description here Code is

  function draw() { if (circ == 1) { context.beginPath(); context.arc(rect.startX, rect.startY, rect.w, rect.h, Math.PI * 2, false); context.stroke(); } } function mouseDownrect(e) { rect.startX = (e.layerX - this.offsetLeft); rect.startY = e.layerY - this.offsetTop; drag = true; } function mouseUprect() { draw(); rect.w = 0; rect.h = 0; drag = false; } function mouseMoverect(e) { if (drag == true) { rect.w = (e.layerX - this.offsetLeft) - rect.startX; rect.h = (e.layerY - this.offsetTop) - rect.startY; } } function rectangle() { color = 'black'; rectan = 1; circ = 0; pen = 0; canvas.addEventListener('mousedown', mouseDownrect, false); canvas.addEventListener('mouseup', mouseUprect, false); canvas.addEventListener('mousemove', mouseMoverect, false); } function Circle() { color = 'black'; circ = 1; rectan = 0; pen = 0; canvas.addEventListener('mousedown', mouseDownrect, false); canvas.addEventListener('mouseup', mouseUprect, false); canvas.addEventListener('mousemove', mouseMoverect, false); } 

Answer 1

The fourth argument in arc() is the starting ANGLE. So you want 0 to Math.PI * 2 for a full circle.

context.arc(rect.startX, rect.startY, rect.w, 0, Math.PI * 2, false);

Also, the 3rd argument is the RADIUS, and i don't know what you want that to be.