Tengo un problema con las líneas de mi lienzo: cada vez que trato de dibujar líneas, no son suaves, las líneas se ven como un montón de pequeñas líneas conectadas entre sí, traté de encontrar una solución usando quadraticCurveTo y calculando un punto medio para el línea

 const draw = (e) => { if (!isPainting) { return; } const x = e.pageX - canvasOffsetX; const y = e.pageY - canvasOffsetY; points.push({ x: x, y: y }); ctx.lineWidth = lineWidth; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.globalAlpha = opacity; ctx.imageSmoothingQuality = "high"; ctx.beginPath(); if (points.length === 1) { ctx.moveTo(x, y); } else { for (let i = 1, len = points.length; i < len; i++) { let xc = (points[i].x + points[i + 1].x) / 2; let yc = (points[i].y + points[i + 1].y) / 2; ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc); } ctx.stroke(); } };

este método funcionó bien, pero las líneas aparecen después de que el mouse está arriba o después de que se realiza el cálculo, lo cual no es el mejor enfoque, traté de dibujar la línea antes de cambiarla después de que el mouse está arriba, pero tampoco funcionó.

la única respuesta relativa que pude encontrar fue este codepen: https://codepen.io/kangax/pen/kyYrdX

pero el problema es que tengo que limpiar el lienzo antes de dibujar nuevas líneas y quiero que todos los dibujos estén presentes