v_i_kaisarov

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();
};

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