Инструмент «Карандаш», создающий несколько линий одновременно ⇐ Javascript

[Anonymous]

Я реализую инструмент «Карандаш» в своем коде с использованием HTML и JS, все, что мне нужно, это иметь возможность рисовать на холсте.
Во-первых, я понял, что для рисования мне нужен контекст холста и использовать его методы (beginPath, moveTo, lineTo и Stroke) для рисования в контексте через контекст холста.
Моя проблема в том, что при рисовании линии я получаю несколько линий из моей последней точки мышь на моем холсте в любую текущую точку мыши на холсте.
Прочитав это, мне все еще трудно найти решение этой проблемы.
HTML









BlaqdPad - Import, Edit, Draw, Share!







Select



Import



Pencil



New Canva



Download




Settings












JavaScript
const canvas = document.querySelector(".cnv-layer");
const pencilTool = document.querySelector(".pencil");
pencilTool.addEventListener("click", () => {
activeTool = "pencil";
canvas.style.pointerEvents = "auto";
// pencilTool.style.backgroundColor = "blanchedalmond";
});
//Pencil Tool
const context = canvas.getContext("2d");
// console.log(context);
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener("mousedown", (e) => {
if (activeTool !== "pencil") return;
isDrawing = true;
lastX = e.offsetX;
lastY = e.offsetY;
});
canvas.addEventListener("mousemove", (e) => {
if (activeTool !== "pencil" || !isDrawing) return;
context.beginPath();
context.lineWidth = 3
context.moveTo(lastX, lastY);
context.lineTo(e.offsetX, e.offsetY);
context.stroke();
})


Подробнее здесь: https://stackoverflow.com/questions/798 ... ltaneously