Нужно рисовать прямоугольник на canvas, как это делается в Paint. А именно: ткнуть в определенную точку на canvas и тянуть диагональ. Вот, что на данный момент у меня есть
canvas.addEventListener("mousedown", (e) => {
last_mousex = e.clientX - canvasx;
last_mousey = e.clientY - canvasy;
mousedown = true;
});
canvas.addEventListener("mouseup", (e) => {
mousedown = false;
});
canvas.addEventListener("mousemove", (e) => {
mousex = e.clientX - canvasx;
mousey = e.clientY - canvasy;
if (mousedown) {
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.beginPath();
var width = mousex - last_mousex;
var height = mousey - last_mousey;
ctx.rect(last_mousex, last_mousey, width, height);
ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.stroke();
}
});
Такой код стирает весь canvas и перерисовывает прямоугольник заново при движении мыши. Но мне нужно, чтобы все, что было до начала рисования прямоугольника, сохранилось. Можно ли такое реализовать?
