Getting dotted line on html Canvas - reactjs

Question

I am using React to develop a real-time paint app. So, the idea is to store mouse events in an array(to pass it through socket) and pass it to draw function. However, when I move mouse fast, I'm getting a dotted line instead of smooth line. If I directly draw using mouse events instead of an array, I'm getting a smooth line. So I guess the issue is in pushing mouse events into the array.
This is my output:
The following is my PaintCanvas component
function PaintCanvas(props) {
let ctx;
const canvasRef = useRef("");
const [isDrawing, changeIsDrawing] = useState(false);
let strokes = [];
const mouseDownFunction = e => {
changeIsDrawing(true);
if (ctx) {
wrapperForDraw(e);
}
};
const mouseUpFunction = e => {
if (ctx) {
ctx.beginPath();
}
changeIsDrawing(false);
};
const mouseMoveFunction = e => {
if (ctx) {
wrapperForDraw(e);
}
};
const wrapperForDraw = e => {
if (!isDrawing) return;
strokes.push({
x: e.clientX,
y: e.clientY
});
drawFunction(strokes);
};
const drawFunction = strokes => {
let { top, left } = canvasRef.current.getBoundingClientRect();
if (!isDrawing) return;
ctx.lineWidth = 3;
ctx.lineCap = "round";
for (let i = 0; i < strokes.length; i++) {
ctx.beginPath();
//adding 32px to offset my custom mouse icon
ctx.moveTo(strokes[i].x - left, strokes[i].y - top + 32);
ctx.lineTo(strokes[i].x - left, strokes[i].y - top + 32);
ctx.closePath();
ctx.stroke();
}
};
useEffect(() => {
let canvas = canvasRef.current;
ctx = canvas.getContext("2d");
});
return (
<div>
<canvas
ref={canvasRef}
width="500px"
height="500px"
onMouseDown={mouseDownFunction}
onMouseUp={mouseUpFunction}
onMouseMove={mouseMoveFunction}
className={styles.canvasClass}
/>
</div>
);
}
export default PaintCanvas;
How can I get a smooth line using the array implementation.

Answer 1

In your loop where you are drawing the lines, you don't need to call moveTo every iteration. Each call of lineTo() automatically adds to the current sub-path, which means that all the lines will all be stroked or filled together.
You need to pull beginPath out of the loop, remove the moveTo call and take the stroke outside the loop for efficiency.
ctx.beginPath();
for (let i = 0; i < strokes.length; i++) {
//adding 32px to offset my custom mouse icon
//ctx.moveTo(strokes[i].x - left, strokes[i].y - top + 32); // Remove this line
ctx.lineTo(strokes[i].x - left, strokes[i].y - top + 32);
}
// Its also more efficient to call these once for the whole line
ctx.stroke();