Почему clearRect странно работает с Path2D?

Question

[v_i_kaisarov]

Не понимаю как работает clearRect, он вроде как работает, а вроде как и нет
Примеры:
https://jsfiddle.net/Vitec/b13md7v2/49/ - тут я пытался сделать перетаскивание и если элемент за пределами экрана он перестает очищать его
https://jsfiddle.net/Vitec/3erkmzj5/18/ - а тут я пытался сделать добавление, старые элементы не удаляются. (например если кликнуть два раза по кнопке добавить, будет 3 элемента вместо двух)

Как правильно делать очистку canvas?

Comments

[Александр]

Если Вы перенесете песочницу из JSFiddle в CodePen, то сможете, возможно, получить ответ быстрее.

[ksnk]

Ну, дык. В первом варианте никакой clearRect не вызывается, а вызывается context.translate. Нужно запоминать дельты и вызывать отрисовку задач.
Во втором случае - нужно добавлять один раз, а не два. Вероятно, нужно пристрелить taskList.push(task), впрочем можно и taskList.map...

[Rise]

Александр, почему?

[Александр]

Rise, по VPN только можно подключится большинству, как мне кажется, пользователей.

Answer 1

[Александр]

1. Необходимо создать Path2D один раз, а у Вас в него добавляется новый прямоугольник на каждой итерации render. Что-то вроде:

const createPath = (x, y) => {
  const path = new Path2D();
  path.roundRect(x, y, 200, 40, 30);
  return path;
};

let taskList = [
  { id: 0, value: "", x: 150, y: 75 },
  { id: 0, value: "", x: -150, y: 75 },
].map((entry) => ({ ...entry, path: createPath(entry.x, entry.y) }));

2. Храните позицию камеры и перемещайте холст на каждой итерации render.
Добавляем переменные для отслеживания позиции камеры на холсте.

let cameraX = 0;
let cameraY = 0;

Обновляем позицию камеры на холсте.

addEventListener("mousemove", ({ button, clientX, clientY }) => {
  if (pressMM) {
    cameraX += clientX - lastX;
    cameraY += clientY - lastY;
    lastX = clientX;
    lastY = clientY;
  }
});

Рисуем элементы с учетом позиции камеры холста.

const drawTasks = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.save();
  context.translate(cameraX, cameraY);

  for (const { x, y, path, value } of taskList) {
    context.beginPath();
    context.stroke(path);
  }

  context.restore();
};

Второй пример сначала дополните всеми изменениями и после решайте, насколько корректное поведение.