Рисование перекрывающихся полупрозрачных линий без видимого перекрытия

Я разрабатываю программу рисования с использованием холста HTML5. Я создал инструмент рисования, в котором пользователь перетаскивает и перемещает мышь.

У меня есть слушатель события mousemove , который рисует короткие линии:

Painter.mainCanvas.beginPath();
Painter.mainCanvas.moveTo(Painter.lastX, Painter.lastY);
Painter.lastX = e.offsetX;
Painter.lastY = e.offsetY;
Painter.mainCanvas.lineTo(Painter.lastX, Painter.lastY);
Painter.mainCanvas.stroke();

Все работает хорошо, пока я не установил глобальный альфа-канал на <1. При использовании этого метода для рисования, конец точка также является начальной точкой. Итак, точка нарисована дважды. И поскольку у нас прозрачный цвет, точка теперь имеет другой цвет по сравнению с другими точками на линии.

Я пробовал другой метод, который при срабатывании mousemove использует только lineTo () и stroke () при срабатывании mouseup.

Это решает проблему двойного рисования, но также создает новую проблему: когда пользователь намеревается нарисовать одну и ту же точку дважды, то есть пересечь линию без курсора мыши, точка не будет нарисована дважды. Поскольку функция lineTo () не будет рисовать точку дважды без обводки между ними.