I'm trying to make drawing board. I'm using ctx.beginPath() and to smooth out the edges I added ctx.arc() and ctx.fill(). But the problem is that if I move mouse too quickly it's not drawing continues line. It draws circles with spaces between them. The greater speed of the mouse, the greater are the spaces between circles. Here's my JS code:
var lastX;
var lastY;
var mouseX;
var mouseY;
function handleMouseMove(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
if (isMouseDown) {
ctx.beginPath();
ctx.strokeStyle = x;
ctx.lineWidth = y;
if (mode == "pen") { //This is drawing mode (The problem is here)
ctx.globalCompositeOperation = "source-over";
ctx.arc(lastX, lastY, y, 0, Math.PI * 2, false); //y is just strokes width
ctx.fill();
ctx.stroke();
} else { //This is eraser
ctx.globalCompositeOperation = "destination-out";
ctx.arc(lastX, lastY, 8, 0, Math.PI * 2, false);
ctx.stroke();
ctx.fill();
}
lastX = mouseX;
lastY = mouseY;
}
}
Rather than draw an arc draw a path with a lineWidth
Set the ctx.lineWidth to the radius of the circle * 2. For end points set ctx.lineCap = "round" and for corners set ctx.lineJoin = "round"
Click drag on canvas to draw.
const points = [];
const mouse = {x : 0, y : 0, button : false}
const ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", mouseEvents);
canvas.addEventListener("mousedown", mouseEvents);
canvas.addEventListener("mouseup", mouseEvents);
function mouseEvents(e){
mouse.x = e.pageX - 1;
mouse.y = e.pageY - 1;
const lb = mouse.button;
mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
if (mouse.button) {
if (!lb) { points.length = 0 }
points.push({x: mouse.x, y: mouse.y});
drawPoints();
}
}
function drawPoints() {
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.lineWidth = 20;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.beginPath();
for (const p of points) { ctx.lineTo(p.x, p.y); }
ctx.stroke();
}canvas {
position : absolute; top : 0px; left : 0px;
cursor: crosshair;
border: 1px solid black;
}<canvas id="canvas" width="256" height="256"></canvas>