Перетаскивание объектов холста

Проблема в том, что в момент «mousedown» у вас не инициализируются переменные dragStartX и dragStartY, из-за чего при первом же «mousemove» вычисляется слишком большое смещение и картинка «скачет».

Есть два основных способа решения:

Способ 1 (инкрементальное смещение)

В mousedown запоминаем текущие координаты мыши как dragStartX и dragStartY. Затем в mousemove считаем, насколько сдвинулась мышь с прошлого события, и на эту же величину сдвигаем объект.

Шаги

1. Инициализировать dragStartX и dragStartY внутри mousedown, сразу после определения activeObject:

   js
   canvas.addEventListener('mousedown', (e) => {
     const rect = canvas.getBoundingClientRect();
     const clickX = e.clientX - rect.left;
     const clickY = e.clientY - rect.top;
     activeObject = null;
   
     for (let i = objectsOnCanvas.length - 1; i >= 0; i--) {
       const obj = objectsOnCanvas[i];
       if (
         clickX >= obj.x && clickX <= obj.x + obj.width &&
         clickY >= obj.y && clickY <= obj.y + obj.height
       ) {
         activeObject = obj;
         // Переместить выбранный объект наверх
         objectsOnCanvas.splice(i, 1);
         objectsOnCanvas.push(obj);
         break;
       }
     }
     drawScene();
     
     if (activeObject) {
       // Запоминаем начальные координаты для расчета dx, dy
       dragStartX = clickX;
       dragStartY = clickY;
       
       canvas.addEventListener('mousemove', onMouseMove);
       canvas.addEventListener('mouseup', onMouseUp);
     }
   });

2. В onMouseMove оставляем логику инкрементального сдвига:

   js
   function onMouseMove(e) {
     if (!activeObject) return;
     isDragging = true;
     const rect = canvas.getBoundingClientRect();
     const moveX = e.clientX - rect.left;
     const moveY = e.clientY - rect.top;
     const dx = moveX - dragStartX;
     const dy = moveY - dragStartY;
   
     activeObject.x += dx;
     activeObject.y += dy;
   
     // Обновляем dragStartX, dragStartY на новые координаты
     dragStartX = moveX;
     dragStartY = moveY;
   
     drawScene();
   }

Благодаря тому, что мы сразу при нажатии «мыши вниз» (mousedown) запомнили исходные координаты клика, первый dx и dy будут нулевыми или минимальными, и объект не будет «скакать».

Способ 2 (абсолютное позиционирование)

Вместо инкрементального подхода можно вычислять координаты объекта как абсолютные значения (мышь минус некоторая «погрешность»), а не суммировать смещения. Для этого:

1. В mousedown запоминаем «смещение внутри объекта» — то есть, насколько внутри картинки мы кликнули:

   js
   let offsetX = 0;
   let offsetY = 0;
   
   canvas.addEventListener('mousedown', (e) => {
     const rect = canvas.getBoundingClientRect();
     const clickX = e.clientX - rect.left;
     const clickY = e.clientY - rect.top;
     activeObject = null;
   
     for (let i = objectsOnCanvas.length - 1; i >= 0; i--) {
       const obj = objectsOnCanvas[i];
       if (
         clickX >= obj.x && clickX <= obj.x + obj.width &&
         clickY >= obj.y && clickY <= obj.y + obj.height
       ) {
         activeObject = obj;
         // Переместить выбранный объект наверх
         objectsOnCanvas.splice(i, 1);
         objectsOnCanvas.push(obj);
         
         // Запоминаем смещение относительно левого верхнего угла картинки
         offsetX = clickX - obj.x;
         offsetY = clickY - obj.y;
         
         break;
       }
     }
     drawScene();
     
     if (activeObject) {
       canvas.addEventListener('mousemove', onMouseMove);
       canvas.addEventListener('mouseup', onMouseUp);
     }
   });

2. В mousemove уже позиционируем объект по абсолютным координатам:

   js
   function onMouseMove(e) {
     if (!activeObject) return;
     isDragging = true;
     const rect = canvas.getBoundingClientRect();
     const mouseX = e.clientX - rect.left;
     const mouseY = e.clientY - rect.top;
   
     // Устанавливаем x, y так, чтобы левый верхний угол объекта
     // совпадал с (mouseX - offsetX, mouseY - offsetY).
     activeObject.x = mouseX - offsetX;
     activeObject.y = mouseY - offsetY;
   
     drawScene();
   }

Таким образом, объект будет перемещаться точно за курсором с тем же смещением, которое было при первом клике.

Почему возникает «резкий» прыжок?

Потому что в исходном коде dragStartX и dragStartY не устанавливаются в момент нажатия кнопки. В итоге первая разница dx = moveX - dragStartX получается большой (так как dragStartX/dragStartY либо равны 0, либо не инициализированы как нужно), и объект «улетает».

Исправить это можно любым из описанных способов: либо инкрементальный сдвиг (и обязательно сохранить начальные координаты при mousedown), либо абсолютное позиционирование с вычислением «смещения внутри объекта».

Довольно частый сценарий: если пользователь во время перетаскивания выходит за пределы холста и отпускает кнопку мыши за его пределами, то mouseup-событие на самом холсте (canvas) не сработает. В результате обработчик onMouseUp (который удаляет слушатель mousemove) не вызывается, и объект «залипает» за курсором.

Как это исправить?

Вариант 1. «Глобальные» слушатели (рекомендуется)

Вместо добавления и снятия слушателей mousemove и mouseup именно на холсте, добавляйте их на document (или window). Тогда, даже если пользователь выйдет мышью за пределы холста, события все равно будут отлавливаться.

1. Вместо canvas.addEventListener('mousemove', onMouseMove) используйте document.addEventListener('mousemove', onMouseMove).
2. Аналогично с mouseup: document.addEventListener('mouseup', onMouseUp).
3. А когда закончится «mouseup», убирайте слушатели с document (или window).

Примерно так:

js
canvas.addEventListener('mousedown', (e) => {
  const rect = canvas.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  const clickY = e.clientY - rect.top;
  activeObject = null;

  for (let i = objectsOnCanvas.length - 1; i >= 0; i--) {
    const obj = objectsOnCanvas[i];
    if (
      clickX >= obj.x && clickX <= obj.x + obj.width &&
      clickY >= obj.y && clickY <= obj.y + obj.height
    ) {
      activeObject = obj;
      // Переместить выбранный объект наверх
      objectsOnCanvas.splice(i, 1);
      objectsOnCanvas.push(obj);
      break;
    }
  }
  drawScene();

  if (activeObject) {
    // Запоминаем начальные координаты для расчета dx, dy
    dragStartX = clickX;
    dragStartY = clickY;
    isDragging = true;

    // Начинаем слушать события мыши на document:
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  }
});

function onMouseMove(e) {
  if (!activeObject || !isDragging) return;
  const rect = canvas.getBoundingClientRect();
  const moveX = e.clientX - rect.left;
  const moveY = e.clientY - rect.top;
  const dx = moveX - dragStartX;
  const dy = moveY - dragStartY;

  activeObject.x += dx;
  activeObject.y += dy;

  dragStartX = moveX;
  dragStartY = moveY;

  drawScene();
}

function onMouseUp(e) {
  // Завершаем перетаскивание и убираем слушатели
  isDragging = false;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
}

Преимущество: пользователь может начать перетаскивать внутри холста, выйти за его пределы и там отпустить мышь — все равно корректно сработает «mouseup» и объект не будет «залипать».

Вариант 2. Отслеживать «mouseleave» / «mouseout» у canvas

Еще один путь — отлавливать событие mouseleave (или mouseout) на самом холсте и при покидании мышью холста, если идет перетаскивание, завершать его насильно (то есть вызывать onMouseUp). Но это менее универсальный вариант: если пользователь вышел с мышью за пределы канвы, но вернулся обратно, это может прервать/сломать логику перетаскивания.

Поэтому первый способ (добавить глобальные обработчики для мыши) обычно считается удобнее и надежнее.

Ниже разберём два отдельных аспекта:

1. Загрузка изображения «уже без фона» — то есть удаление (или маскировка) фона у картинки после загрузки.
2. Добавление изображения как фона холста (то есть расположение слоя-объекта за всеми остальными).

1. Загрузка изображения без фона

Самый простой (но и самый грубый) способ — удалить сплошной (однотонный) цвет фона. Например, если фон у картинки белый или зелёный (хромакей), можно «прозрачно» закрасить все пиксели похожего цвета. Для этого:

1. Создаём временный (offscreen) <canvas>.
2. Рисуем туда исходное изображение.
3. Считываем ImageData.
4. Меняем альфа-канал (прозрачность) тех пикселей, которые нужно «выбросить» (фон).
5. Возвращаем данные на временный <canvas>.
6. Получаем из него DataURL и создаём новое Image(), у которого фон уже будет прозрачным.

Пример (наивный метод, убирает все «почти белые» пиксели):

js
/**
 * Удаляет белый фон (или очень близкий к белому)
 * @param {HTMLImageElement} img - исходное изображение
 * @param {number} threshold - порог «близости» к белому (0..255)
 * @returns {HTMLImageElement} - новое изображение с прозрачным фоном
 */
function removeWhiteBackground(img, threshold = 15) {
  // Создаём временный canvas
  const offCanvas = document.createElement('canvas');
  offCanvas.width = img.width;
  offCanvas.height = img.height;
  const offCtx = offCanvas.getContext('2d');

  // Рисуем на нём исходную картинку
  offCtx.drawImage(img, 0, 0);

  // Получаем пиксельные данные
  const imageData = offCtx.getImageData(0, 0, offCanvas.width, offCanvas.height);
  const data = imageData.data; // [r, g, b, a, r, g, b, a, ...]

  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    const a = data[i + 3];

    // Проверяем, «насколько» пиксель близок к белому
    // (можно менять логику — например, взять цвет первого пикселя или анализировать углы)
    const distanceToWhite = Math.sqrt(
      (255 - r) ** 2 +
      (255 - g) ** 2 +
      (255 - b) ** 2
    );

    if (distanceToWhite < threshold) {
      // Делаем пиксель прозрачным
      data[i + 3] = 0;
    }
  }

  // Записываем изменённую картинку обратно
  offCtx.putImageData(imageData, 0, 0);

  // Создаём новое изображение, в котором фон будет прозрачным
  const newImg = new Image();
  newImg.src = offCanvas.toDataURL(); // data:image/png;base64,...
  return newImg;
}

В этом примере мы грубо «вырезаем» всё, что близко к белому цвету. Если нужно вырезать зелёный фон (хромакей), то есть «green screen», берём порог по зелёному каналу и т.д. Либо пишем более сложный алгоритм.

Далее, когда картинка загружена (в loadImageFromUrl или loadImageFromDataUrl), перед тем как вызвать addImageToCanvas(...), можно пропустить её через этот метод:

js
function loadImageFromUrl(url) {
  const img = new Image();
  img.crossOrigin = 'anonymous'; // если нужны кросс-доменные картинки
  img.onload = () => {
    // Удаляем белый фон
    const imageWithoutBg = removeWhiteBackground(img);
    // Добавляем на холст уже «очищенную» картинку
    addImageToCanvas(imageWithoutBg, false);
  };
  img.onerror = () => {
    alert('Ошибка загрузки изображения по URL');
  };
  img.src = url;
}

Теперь загружаемое изображение станет «прозрачным» там, где был условный цвет фона.

Важно: если фон у картинки не однотонный, или требуется «качественная» сегментация (например, вырезать человека по контуру), то вручную (через <canvas>) сделать это непросто. Обычно используют готовые нейросетевые сервисы вроде remove.bg или т.п., но тогда придётся отсылать картинку на сервер или использовать специальные библиотеки.

2. Добавление изображения на холст в качестве фона

В вашем коде уже есть механика «isBackground», которая при добавлении объекта кладёт его в начало массива слоёв (через unshift) и при этом удаляет предыдущий фон:

js
if (isBackground) {
  // Удаляем предыдущий фон
  objectsOnCanvas = objectsOnCanvas.filter(obj => !obj.isBackground);
  objectsOnCanvas.unshift(object);
} else {
  objectsOnCanvas.push(object);
}

Шаги по доработке

1. Добавляем кнопку «Добавить фон».
   Судя по вашему HTML, она уже есть:

   html
   <div>
     <label>Добавить изображение как фон:</label>
     <button id="addBackgroundBtn">Добавить фон</button>
   </div>

2. Вешаем обработчик на эту кнопку.
   Допустим, вы хотите подставить в качестве фона либо URL из текстового поля (#imageUrl), либо берёте последний загруженный файл. Тогда делаем что-то вроде:

   js
   const addBackgroundBtn = document.getElementById('addBackgroundBtn');
   addBackgroundBtn.addEventListener('click', () => {
     const url = imageUrlInput.value.trim();
     if (!url) {
       alert('Введите URL для фона или загрузите файл.');
       return;
     }
     // Загружаем картинку и добавляем как фон
     loadImageAsBackground(url);
   });
   
   function loadImageAsBackground(url) {
     const img = new Image();
     img.crossOrigin = 'anonymous';
     img.onload = () => {
       // Если нужно убрать фон у самой фоновой картинки — тоже можно
       // const imageWithoutBg = removeWhiteBackground(img);
       // addImageToCanvas(imageWithoutBg, true);
       addImageToCanvas(img, true);
     };
     img.onerror = () => {
       alert('Ошибка загрузки фонового изображения.');
     };
     img.src = url;
   }

3. При добавлении фона в addImageToCanvas(img, true), объект попадает на «задний план» массива objectsOnCanvas, поскольку вызывается unshift(object), и при этом старый фон (если был) убирается.

Таким образом, если вы хотите:

• Обычные изображения (без фона) загружать как «передний план» — вызывайте addImageToCanvas(imageWithoutBg, false).
• Картинки, идущие как фон — вызывайте addImageToCanvas(..., true).

Код уже учитывает флаг isBackground.

Итоговый сценарий загрузки «с вырезанным фоном» + «добавить как фон»

1. Кнопка «Загрузить из URL» – загружает картинку, вырезает фон, размещает на холсте как обычный слой (foreground).
2. Кнопка «Добавить фон» – берёт URL из того же поля (или другого поля, или файла — как захотите) и добавляет картинку (без вырезания фона, либо тоже с вырезанием, если нужно) на задний план.

Пример кусочка кода:

js
// При клике «Загрузить из URL» — грузим «без фона», кладём как foreground
loadUrlBtn.addEventListener('click', () => {
  const url = imageUrlInput.value.trim();
  if (url) {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      // 1) вырезаем фон у картинки
      const imageWithoutBg = removeWhiteBackground(img);
      // 2) добавляем на холст
      addImageToCanvas(imageWithoutBg, false);
    };
    img.onerror = () => alert('Ошибка загрузки изображения.');
    img.src = url;
  }
});

// При клике «Добавить фон» — грузим и кладём как background
addBackgroundBtn.addEventListener('click', () => {
  const url = imageUrlInput.value.trim();
  if (url) {
    const bgImg = new Image();
    bgImg.crossOrigin = 'anonymous';
    bgImg.onload = () => {
      // Можно не вырезать фон, если «фон на фон» не мешает
      addImageToCanvas(bgImg, true);
    };
    bgImg.onerror = () => alert('Ошибка загрузки фоновой картинки.');
    bgImg.src = url;
  }
});

Таким образом, у вас будет возможность (1) загружать «вырезанные» изображения в пользовательский проект, (2) загружать картинку и ставить её как настоящий фон слоя.