Как рисовать прмоугольники на canvas как в Paint?

Question

[kunjut19]

Нужно рисовать прямоугольник на 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 и перерисовывает прямоугольник заново при движении мыши. Но мне нужно, чтобы все, что было до начала рисования прямоугольника, сохранилось. Можно ли такое реализовать?

Answer 1

[Александр]

Comments

[kunjut19]

спасибо большое! то, что нужно

Answer 2

[Sergey]

Судя по всему, это не ваш код. Иначе бы вы не спрашивали, потому что в коде коммент есть даже: clear canvas

Comments

[kunjut19]

я не спрашивал, почему он всё стирает. Это мне известно. Вопрос в том, как сохранять все то, что было нарисовано на полотне до начала рисования прямоугольника.

[Ярослав Иванов]

kunjut19, Хранить координаты x1, y1, x2, y2 в массиве и на основе этих данных рисовать.