Инструмент «Прямоугольное выделение» в данном редакторе предназначен для создания выделенной области в форме прямоугольника или квадрата. Выделение ограничивает область действия других инструментов (кисти, заливки, фильтров) и позволяет выполнять различные операции с пикселями строго внутри этих границ.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой пунктирного квадрата в левой панели инструментов или с помощью горячей клавиши M.
• Создание выделения: Пользователь зажимает левую кнопку мыши на холсте и тянет курсор. При этом формируется прямоугольник от начальной точки клика до текущего положения курсора.
• Направление движения: Прямоугольник можно рисовать в любую сторону (сверху вниз, снизу вверх, по диагонали). Координаты и размеры (x, y, w, h) автоматически нормализуются (вычисляются минимальные значения и абсолютные величины), поэтому выделение всегда строится корректно.
• Визуальное отображение: Граница выделенной области рисуется поверх холста в виде «бегущих муравьев» (marching ants) — это анимированная пунктирная линия, состоящая из черно-белых штрихов.

2. Возможности и операции с прямоугольным выделением

Как только прямоугольное выделение создано, с ним можно выполнять следующие действия (доступны через меню «Правка» или горячими клавишами):

Ограничение рисования (Маска отсечения)

Любые инструменты рисования (Кисть, Карандаш, Ластик, Распылитель, Штамп, Заливка, Градиент, Инструменты для рисования фигур) будут действовать только внутри прямоугольника. Если вы проведете кистью за пределами границ, линия не появится.

Заливка выделенной области

• Действие: Заливает весь прямоугольник основным цветом (FG) с учетом текущей непрозрачности инструмента.
• Где найти: Меню «Правка» -> «Залить выделение цветом».

Обводка выделенной области

• Действие: Рисует контур (рамку) по краям прямоугольника. Толщина линии, цвет и непрозрачность берутся из настроек активного инструмента (например, Кисти).
• Где найти: Меню «Правка» -> «Обвести выделение».

Вырезание на новый слой

• Действие: Берет все пиксели, находящиеся внутри прямоугольника на текущем слое, удаляет их с этого слоя и переносит на новый слой, созданный чуть выше. Это удобно для быстрого извлечения объектов или деления изображения на части.
• Где найти: Меню «Правка» -> «Вырезать на новый слой» (или Ctrl+Shift+J).

Удаление выделенного

• Действие: Полностью стирает (делает прозрачным) содержимое внутри прямоугольника на активном слое.
• Где найти: Меню «Правка» -> «Удалить выделенное» (или клавиша Del).

Обрезка холста до выделения

• Действие: Изменяет размер всего холста. Размеры холста станут равны габаритам вашего прямоугольного выделения. Все слои будут обрезаны по этим размерам.
• Где найти: Меню «Правка» -> «Обрезать до выделения».

Интеграция с инструментом «Текст» (Уникальная возможность)

Если у вас создано прямоугольное выделение, и вы выбираете инструмент «Текст» (T), клик внутри выделенной области создаст текстовое поле, которое точно совпадает с размерами прямоугольника. Введенный текст будет автоматически масштабироваться (уменьшаться), чтобы поместиться в эти границы, а при отрисовке на холсте будет обрезан по краям выделения.

3. Ограничения и особенности в данной реализации

• Нет пропорционального рисования: В коде не реализовано удержание Shift для рисования идеального квадрата. Прямоугольник всегда принимает форму той области, которую вы выделили мышью.
• Нет рисования от центра: Нет удержания Alt для рисования прямоугольника наружу от центральной точки клика.
• Выделение только одно: При начале рисования нового прямоугольника старое выделение автоматически снимается. Нельзя добавить к существующему прямоугольнику еще один (отсутствует Shift для добавления к выделению).
• Перемещение содержимого: Инструмент «Перемещение» (V) сдвигает содержимое всего активного слоя целиком, а не только пиксели внутри прямоугольного выделения (маска отсечения при перемещении в коде не применяется).
• Снятие выделения: Чтобы снять выделение, нужно нажать Ctrl+D или выбрать инструмент выделения и кликнуть мышкой мимо текущего прямоугольника. Команда «Выделить всё» (Ctrl+A) использует именно этот инструмент, создавая прямоугольник по границам всего холста.

Инструмент «Эллиптическое выделение» в данном редакторе предназначен для создания выделенной области в форме эллипса (овала или круга). Выделение ограничивает область действия других инструментов (кисти, заливки, фильтров) и позволяет выполнять различные операции сpixels внутри этой формы.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой круга в левой панели инструментов. Горячая клавиша не назначена.
• Создание выделения: Пользователь зажимает левую кнопку мыши на холсте и тянет курсор. При этом формируется «ограничивающий прямоугольник», внутри которого рисуется эллипс.
• Направление движения: Эллипс можно рисовать в любую сторону (сверху вниз, снизу вверх, по диагонали). Координаты автоматически пересчитываются так, чтобы выделение всегда строилось корректно.
• Визуальное отображение: Граница выделенной области рисуется поверх холста в виде «бегущих муравьев» (marching ants) — это анимированная пунктирная линия, состоящая из черно-белых штрихов.

2. Возможности и операции с эллиптическим выделением

Как только эллиптическое выделение создано, с ним можно выполнять следующие действия (доступны через меню «Правка» или горячими клавишами):

Ограничение рисования (Маска отсечения)

Любые инструменты рисования (Кисть, Карандаш, Ластик, Распылитель, Штамп, Заливка, Градиент, Инструменты для рисования фигур) будут действовать только внутри эллипса. Если вы проведете кистью через край выделения, линия резко обрежется по границе эллипса.

Заливка выделенной области

• Действие: Заливает весь эллипс основным цветом (FG) с учетом текущей непрозрачности.
• Где найти: Меню «Правка» -> «Залить выделение цветом».

Обводка выделенной области

• Действие: Рисует контур (кольцо) по краю эллипса. Толщина линии, цвет и непрозрачность берутся из настроек активного инструмента (например, Кисти).
• Где найти: Меню «Правка» -> «Обвести выделение».

Вырезание на новый слой

• Действие: Берет все пиксели, находящиеся внутри эллипса на текущем слое, удаляет их с этого слоя и переносит на новый слой, созданный чуть выше. Это удобно для быстрого извлечения объектов (например, вырезать круглое лицо с фона).
• Где найти: Меню «Правка» -> «Вырезать на новый слой» (или Ctrl+Shift+J).

Удаление выделенного

• Действие: Полностью стирает (делает прозрачным) содержимое внутри эллипса на активном слое.
• Где найти: Меню «Правка» -> «Удалить выделенное» (или клавиша Del).

Обрезка холста до выделения

• Действие: Изменяет размер всего холста. Размеры холста станут равны габаритам (ограничивающему прямоугольнику) вашего эллипса. Все слои будут обрезаны по этим размерам.
• Где найти: Меню «Правка» -> «Обрезать до выделения».

Дублирование через перемещение (не требует вызова меню)

Если включен инструмент «Перемещение» (V) и у вас есть активное эллиптическое выделение, зажатие клавиши Alt (на практике в коде нет проверки на Alt, перемещение работает просто перетаскиванием мыши) и сдвиг курсора скопирует содержимое эллипса и сдвинет его, оставляя под оригиналом пустое место (на активном слое).

3. Ограничения и особенности в данной реализации

• Нет пропорционального рисования: В коде не реализовано удержание Shift для рисования идеального круга. Эллипс всегда принимает форму той области, которую вы выделили мышью.
• Нет рисования от центра: Нет удержания Alt для рисования эллипса наружу от начальной точки клика.
• Выделение только одно: При начале рисования нового эллипса старое выделение автоматически снимается. Нельзя добавить к существующему эллипсу еще один (отсутствует Shift для добавления к выделению).
• Обрезка по габаритам: Функция «Обрезать до выделения» обрезает холст по прямоугольной рамке, в которую вписан эллипс, а не вырезает саму эллиптическую форму (что является стандартом для растровых редакторов).
• Снятие выделения: Чтобы снять выделение, нужно нажать Ctrl+D или выбрать инструмент выделения и кликнуть мышкой мимо текущего эллипса.

Инструмент «Магнитное лассо» в данном редакторе предназначен для создания выделенной области произвольной формы. Главная особенность инструмента — автоматическое «прилипание» линии контура к краям объектов на изображении. Это делает его идеальным для вырезания сложных объектов (людей, животных, машин), которые имеют выраженные границы на фоне.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой магнита в левой панели инструментов или с помощью горячей клавиши Q.
• Создание выделения: Пользователь зажимает левую кнопку мыши на краю объекта и ведет курсор вдоль его контура. При движении мыши инструмент непрерывно анализирует пиксели вокруг курсора, вычисляя перепады яркости и цвета (градиент), и автоматически прокладывает линию выделения по наиболее контрастному краю.
• Алгоритм захвата: В процессе ведения курсора инструмент генерирует массив точек. Каждая новая точка добавляется в массив, только если расстояние от предыдущей точки превышает 2 пикселя, что предотвращает перегрузку памяти лишними данными на прямых участках.
• Визуальное отображение: Граница выделенной области рисуется поверх холста в виде «бегущих муравьев» (marching ants) — это анимированная пунктирная линия. В отличие от прямоугольного или эллиптического выделения, контур состоит из множества прямых отрезков, соединяющих сохраненные точки (многоугольник).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступны два ползунка для тонкой настройки алгоритма:

• Сила магнитизма (0–100%): Определяет порог чувствительности алгоритма к перепадам цвета. Чем выше значение, тем сильнее инструмент цепляется за малейшие контрастные переходы. При значении 0% инструмент игнорирует края объектов и работает как обычное (свободное) лассо, просто записывая движение мыши.
• Ширина поиска (5–50 px): Задает радиус вокруг курсора мыши, в котором алгоритм ищет край объекта. Чем сложнее фон и четче объект, тем меньше можно сделать ширину поиска для максимальной точности.

3. Возможности и операции с выделением лассо

Как только контур замкнут (при отпускании кнопки мыши), создается выделенная область. С ней можно выполнять следующие действия (доступны через меню «Правка» или горячими клавишами):

Ограничение рисования (Маска отсечения)

Любые инструменты рисования (Кисть, Карандаш, Ластик, Распылитель, Штамп, Заливка, Градиент) будут действовать только внутри границ, очерченных лассо. Это позволяет, например, затемнить или перекрасить фон строго за пределами вырезанного объекта.

Заливка выделенной области

• Действие: Заливает всю замкнутую область основным цветом (FG) с учетом текущей непрозрачности.
• Где найти: Меню «Правка» -> «Залить выделение цветом».

Обводка выделенной области

• Действие: Рисует контур по линии, проложенной лассо. Толщина линии, цвет и непрозрачность берутся из настроек активного инструмента рисования.
• Где найти: Меню «Правка» -> «Обвести выделение».

Вырезание на новый слой

• Действие: Берет все пиксели, находящиеся внутри контура лассо на текущем слое, удаляет их с этого слоя и переносит на новый слой. Это основное предназначение инструмента — быстрое и чистое извлечение объектов из окружения.
• Где найти: Меню «Правка» -> «Вырезать на новый слой» (или Ctrl+Shift+J).

Удаление выделенного

• Действие: Полностью стирает (делает прозрачным) содержимое внутри контура на активном слое.
• Где найти: Меню «Правка» -> «Удалить выделенное» (или клавиша Del).

4. Ограничения и особенности в данной реализации

• Отсутствие ручного простановки точек: Инструмент работает только в режиме перетаскивания (drag) при зажатой левой кнопке мыши. Нельзя кликать по точкам поочередно, как в классическом магнитном лассо из Photoshop.
• Автоматическое замыкание контура: Контур замыкается автоматически в момент отпускания кнопки мыши (onmouseup). При этом последняя записанная точка соединяется прямой линией с самой первой точкой.
• Нет ручного замыкания: В коде не реализовано двойное нажатие (double-click) или нажатие клавиши Enter для принудительного быстрого замыкания контура.
• Зависимость от контраста: Если объект сливается с фоном (нет видимого перепада яркости/цвета), инструмент не сможет найти край и пройдет просто по траектории движения мыши.
• Обрезка холста недоступна: Функция «Обрезать до выделения» в меню «Правка» принудительно блокируется для выделений типа «лассо» и выдает предупреждение. Обрезать холст можно только под прямоугольные или эллиптические области.
• Снятие выделения: Чтобы снять выделение, нужно нажать Ctrl+D или начать рисовать новый контур.

Инструмент «Кисть» в данном редакторе является основным инструментом для свободного рисования. Он позволяет наносить цветные мазки на активный слой с возможностью настройки размера, непрозрачности и жесткости краев.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой кисти в левой панели инструментов или с помощью горячей клавиши B.
• Процесс рисования: Пользователь зажимает левую кнопку мыши на холсте (начальная точка) и ведет курсор. В процессе движения инструмент вычисляет расстояние между предыдущей и текущей координатой курсора. Если расстояние достаточно велико, алгоритм интерполирует (программно дорисовывает) промежуточные точки, чтобы линия получилась непрерывной и плавной, без разрывов.
• Механика штриха: Каждый штрих состоит из множества накладывающихся друг на друга кружков (точек). Шаг интерполяции (расстояние между точками) динамически вычисляется как bSize / 4, то есть зависит от текущего размера кисти — чем толще кисть, тем больше шаг, что оптимизирует производительность.
• Цвет: Кисть рисует исключительно основным цветом (Foreground Color, FG), выбранным в панели цветов.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступны три ползунка для точной настройки мазка:

• Размер (1–200 px): Определяет диаметр кисти в пикселях. Радиус вычисляется как bSize / 2.
• Непрозрачность (1–100%): Задает прозрачность мазка (параметр globalAlpha). При значении 100% мазок полностью непрозрачен, при меньших значениях сквозь кисть будет просвечивать холст.
• Жёсткость (0–100%): Контролирует резкость краев кисти.
  • При 100% рисуется сплошной круг с резкими границами.
  • При значениях меньше 100% алгоритм использует радиальный градиент. Внутренний радиус (ядро кисти с полным цветом) рассчитывается как r * (bHard / 100). От этого ядра к краям цвет плавно растворяется до полной прозрачности, создавая эффект «мягкой» аэрографной кисти.

3. Интеграция с историей и слоями

• Слои: Кисть рисует только на активном (выбранном в правой панели) и видимом слое. Если слой заблокирован (невидим), рисование игнорируется.
• История (Undo/Redo): При каждом нажатии кнопки мыши (начало нового штриха) текущее состояние слоя сохраняется в стек отмены (undoS). Это позволяет отменить весь штрих целиком одной кнопкой Ctrl+Z, независимо от того, как долго пользователь вел кисть.

4. Ограничения и особенности в данной реализации

• Игнорирование выделения: Важная особенность данного кода — Кисть не ограничивается активным выделением (маска отсечения applyClip для кисти не вызывается). Если у вас создано прямоугольное, эллиптическое выделение или лассо, кисть будет рисовать поверх границ выделения, не обрезаясь по ним.
• Горячие клавиши размера: Во время работы с кистью (а также с карандашом, ластиком и другими инструментами) можно использовать клавиши [ (уменьшить на 2px) и ] (увеличить на 2px) для быстрого изменения диаметра без обращения к верхней панели настроек.
• Нет сглаживания линий (Smoothing): В коде отсутствует стабилизация линии, поэтому при быстром рисовании дуг могут появляться небольшие "угловатые" изломы, так как линия строится строго по математическим координатам курсора мыши.
• Нет чувствительности к давлению: Инструмент не считывает данные с графических планшетов (сила нажатия пера), размер и непрозрачность остаются фиксированными на протяжении всего штриха.

Инструмент «Карандаш» в данном редакторе предназначен для рисования жестких линий без сглаживания. В отличие от кисти, он не создает мягких переходов цвета и рисует строго в пиксельных координатах, что делает его идеальным для пиксель-арта или выполнения точных графических набросков.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой карандаша в левой панели инструментов или с помощью горячей клавиши N.
• Процесс рисования: Пользователь зажимает левую кнопку мыши на холсте и ведет курсор. Как и у кисти, алгоритм вычисляет расстояние между предыдущей и текущей координатой.
• Механика штриха: Главная особенность карандаша — он рисует строго по одному пикселю за раз. В коде для него вызывается функция ctx.fillRect(x, y, 1, 1), то есть на холст накладывается крошечный квадрат размером 1х1 пиксель. Чтобы линия получилась непрерывной, шаг интерполяции (расстояние между точками) для карандаша жестко задан как 1 пиксель, независимо ни от каких настроек. Это гарантирует, что между пикселями не будет разрывов даже при очень быстром движении мыши.
• Цвет: Карандаш рисует исключительно основным цветом (Foreground Color, FG), выбранным в панели цветов.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) для карандаша доступен только один параметр:

• Непрозрачность (1–100%): Задает прозрачность штриха (параметр globalAlpha). При значении 100% пиксели полностью перекрывают рисунок под ними, при меньших значениях сквозь них будет просвечивать холст.
• Примечание: В отличие от кисти, у карандаша отсутствуют настройки размера и жесткости. Он всегда рисует линию толщиной в 1 пиксель с абсолютно резкими границами.

3. Интеграция с историей и слоями

• Слои: Карандаш рисует только на активном (выбранном в правой панели) и видимом слое. Если слой скрыт (галочка глаза снята), рисование игнорируется.
• История (Undo/Redo): При каждом нажатии кнопки мыши (начало нового штриха) текущее состояние слоя сохраняется в стек отмены (undoS). Это позволяет отменить весь штрих целиком одной кнопкой Ctrl+Z, независимо от того, как долго пользователь вел линию.

4. Ограничения и особенности в данной реализации

• Игнорирование выделения: Как и кисть, карандаш не ограничивается активным выделением (маска отсечения applyClip не применяется). Если у вас создана выделенная область, карандаш сможет рисовать поверх ее границ.
• Фиксированный размер: Поскольку размер карандаша зашит в алгоритме как 1x1 пиксель, горячие клавиши [ и ] (уменьшить/увеличить размер) не окажут на него никакого визуального эффекта, хотя переменная размера инструмента в памяти и будет изменена.
• Отсутствие сглаживания (Anti-aliasing): Карандаш не использует алгоритмы сглаживания краев. При рисовании диагональных линий они будут иметь характерную «ступенчатую» структуру, что является стандартом для пиксельной графики, но делает инструмент менее подходящим для плавных эскизов.
• Нет чувствительности к давлению: Инструмент не считывает данные с графических планшетов, оставляя линию одинаковой толщины на всем протяжении.

Инструмент «Ластик» в данном редакторе предназначен для удаления (стирания) пикселей с активного слоя, делая их прозрачными. По своей механике работы он полностью аналогичен Кисти, но вместо нанесения цвета он убирает его, открывая нижележащие слои или шахматный фон.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой ластика в левой панели инструментов или с помощью горячей клавиши E.
• Процесс стирания: Пользователь зажимает левую кнопку мыши на холсте и ведет курсор. Как и у кисти, алгоритм вычисляет расстояние между предыдущей и текущей координатой и интерполирует (программно дорисовывает) промежуточные точки, чтобы стирать непрерывной линией без разрывов.
• Механика удаления: Главное отличие ластика от кисти заключается в использовании режима наложения globalCompositeOperation = 'destination-out'. Это означает, что вместо накладывания нового цвета, мазок ластика работает как маска, «вырезающая» пиксели из канваса активного слоя. Цвет, выбранный в панели (Foreground или Background), при этом игнорируется — ластик всегда стирает в прозрачность.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступны три ползунка, аналогичные настройкам Кисти:

• Размер (1–200 px): Определяет диаметр области стирания в пикселях.
• Непрозрачность (1–100%): Задает силу стирания (параметр globalAlpha). При значении 100% пиксели удаляются полностью (становятся абсолютно прозрачными). При значениях меньше 100% каждый мазок удаляет пиксели лишь частично, позволяя мягко «осветлять» (полупрозрачно стирать) слои за несколько проходов.
• Жёсткость (0–100%): Контролирует резкость краев ластика.
  • При 100% стирает сплошным кругом с резкими границами.
  • При значениях меньше 100% используется радиальный градиент. В центре ластик стирает полностью, а к краям сила стирания плавно падает до нуля, создавая мягкие, растушеванные границы перехода.

3. Интеграция с историей и слоями

• Слои: Ластик работает только на активном (выбранном в правой панели) и видимом слое. Важно понимать, что если вы стираете базовый слой «Фон» (который по умолчанию залит белым цветом), вы протрете его до прозрачности (шахматного фона), так как инструмент удаляет пиксели, а не закрашивает их фоновым цветом.
• История (Undo/Redo): При каждом нажатии кнопки мыши (начало нового мазка стирания) текущее состояние слоя сохраняется в стек отмены (undoS). Это позволяет отменить весь процесс стирания целиком одной кнопкой Ctrl+Z.

4. Ограничения и особенности в данной реализации

• Игнорирование выделения: Как и Кисть, Ластик не ограничивается активным выделением (маска отсечения applyClip для ластика не применяется). Если у вас создана выделенная область, ластик сможет стирать пиксели поверх её границ.
• Горячие клавиши размера: Во время работы с ластиком можно использовать клавиши [ (уменьшить на 2px) и ] (увеличить на 2px) для быстрого изменения диаметра прямо в процессе работы.
• Отсутствие режимов наложения (Blending Modes): Ластик не поддерживает сложные режимы стирания, такие как «Стирать только фон» (Background Eraser) или «Магнитный ластик».
• Нет чувствительности к давлению: Инструмент не считывает силу нажатия пера графического планшета, поэтому непрозрачность и размер остаются фиксированными на протяжении всего мазка.

Инструмент «Распылитель» (Аэрограф) в данном редакторе предназначен для имитации распыления краски. Он наносит цвет множеством мелких точек, создавая мягкий, зернистый эффект, плотность которого зависит от скорости движения мыши. Это идеальный инструмент для создания теней, легких текстур или эффекта граффити.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой баллончика в левой панели инструментов или с помощью горячей клавиши A.
• Процесс распыления: Пользователь зажимает левую кнопку мыши на холсте и ведет курсор.
• Механика штриха: При каждом сдвиге курсора алгоритм вычисляет количество точек для отрисовки по формуле bSize * 3. То есть чем больше размер инструмента, тем больше пикселей краски распыляется за один такт движения.
• Разброс: Каждая точка имеет размер 1х1 пиксель и размещается в случайном месте внутри окружности с радиусом bSize / 2. Расстояние от центра до точки и угол генерируются с помощью функции Math.random(), что создает равномерный, но случайный (шумовой) рисунок.
• Цвет: Распылитель использует исключительно основной цвет (Foreground Color, FG).
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступны два ползунка:

• Размер (5–200 px): Определяет диаметр области распыления. Чем выше значение, тем шире разброс точек. Обратите внимание, что минимальный размер ограничен 5 пикселями.
• Непрозрачность (1–100%): Задает базовую прозрачность краски. Однако в коде есть важная особенность: фактическая прозрачность каждой отдельной точки искусственно занижена и вычисляется как bOp * 0.15. Это значит, что даже при установленной непрозрачности 100%, каждая капля будет иметь лишь 15% непрозрачности. Чтобы получить насыщенный цвет, необходимо задержать курсор на одном месте, позволяя точкам накладываться друг на друга (эффект наслоения).
• Жесткость для этого инструмента отсутствует, так как мягкость краев заложена в самом принципе разброса точек.

3. Интеграция с историей и слоями

• Слои: Распылитель работает только на активном (выбранном в правой панели) и видимом слое.
• История (Undo/Redo): При нажатии кнопки мыши (начало распыления) текущее состояние слоя сохраняется в стек отмены (undoS). При отпускании кнопки (onmouseup) история обновляется, что позволяет отменить весь процесс распыления от начала до конца одной кнопкой Ctrl+Z.

4. Ограничения и особенности в данной реализации

• Эффект начального клика: При одиночном клике (без перемещения мыши) инструмент вызывает функцию рисования точки (drawDot), которая рисует сплошной круг или градиент, как у обычной кисти. Облако точек (эффект распыления) начинает генерироваться только при движении мыши.
• Зависимость от скорости: Как и у реального аэрографа, плотность цвета зависит от скорости ведения курсора. Быстрое движение оставит легкую полупрозрачную дымку, а медленное — плотное пятно.
• Игнорирование выделения: Распылитель не ограничивается активным выделением (маска отсечения applyClip не вызывается). Краска может распыляться поверх границ выделенной области.
• Горячие клавиши размера: Во время работы можно использовать клавиши [ и ] для быстрого изменения диаметра распыления, однако минимальный порог в 5px (заданный в HTML ползунке) при этом игнорируется, позвляя уменьшить размер вплоть до 1px через код обработки клавиш.
• Нет чувствительности к давлению: Инструмент не считывает силу нажатия пера графического планшета, регулировать плотность можно только скоростью движения мыши.

Инструмент «Штамп» (Clone Stamp) в данном редакторе предназначен для клонирования (копирования) части изображения. Он позволяет взять фрагмент картинки из одной области (источника) и перенести его в другую область. Это классический инструмент для ретуши фотографий — удаления дефектов, прыщей, лишних объектов или дублирования элементов.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой штампа в левой панели инструментов или с помощью горячей клавиши S.
• Выбор источника: Для начала работы необходимо зажать клавишу Alt (или Meta/Cmd на Mac) и кликнуть левой кнопкой мыши по точке на холсте, которую вы хотите скопировать. Координаты этой точки сохраняются в памяти как cloneSrc. При успешном выборе источника появится всплывающее уведомление (toast).
• Процесс клонирования: После выбора источника пользователь зажимает левую кнопку мыши в новом месте и ведет курсор. Инструмент запоминает начальную точку рисования (cloneStart) и вычисляет вектор смещения (разницу координат) между источником и текущим положением кисти.
• Механика копирования: При движении мыши инструмент берет пиксели из области источника (с учетом вычисленного смещения) и накладывает их на активный слой. Копирование происходит строго в пределах круглой кисти (радиус зависит от настроек размера).
• Источник данных: Важная особенность данного кода — штамп берет пиксели не из активного слоя, а из итогового отображаемого холста (displayCanvas). Это значит, что источником служит «сплющенное» изображение всех видимых слоев в данный момент.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) для штампа доступен только один ползунок и информационная надпись:

• Размер (1–200 px): Определяет диаметр кисти штампа. Чем больше размер, тем большую область вы захватываете за один мазок.
• Подсказка: В панели также выводится текст «Alt+клик — выбрать источник», напоминающий, как задать точку клонирования.
• Примечание: В отличие от кисти или ластика, настройки непрозрачности и жесткости для штампа отсутствуют в панели параметров и не применяются в алгоритме.

3. Интеграция с историей и слоями

• Слои: Штамп рисует (накладывает скопированные пиксели) только на активный (выбранный в правой панели) и видимый слой. Однако, как упоминалось выше, считывает он пиксели со всех видимых слоев одновременно.
• История (Undo/Redo): При нажатии кнопки мыши (начало мазка клонирования) текущее состояние активного слоя сохраняется в стек отмены (undoS). При отпускании кнопки (onmouseup) история обновляется, что позволяет отменить весь процесс штампования целиком одной кнопкой Ctrl+Z.

4. Ограничения и особенности в данной реализации

• Жесткие края и 100% непрозрачность: Алгоритм клонирования (doClone) работает с массивами пикселей напрямую (ImageData). Он копирует значения RGBA без учета градиентов или матриц смешивания. Поэтому штамп всегда рисует с абсолютно резкими краями (без растушевки) и со 100% непрозрачностью.
• Аномалия одиночного клика: В коде есть особенность: если после выбора источника просто кликнуть мышкой (без перемещения), срабатывает общая функция drawDot. Так как для штампа нет индивидуальной логики в drawDot, он сработает как обычная кисть и поставит точку основным цветом (FG). Эффект клонирования срабатывает только при движении мыши (onmousemove).
• Игнорирование выделения: Штамп не ограничивается активным выделением (маска отсечения applyClip не вызывается). Скомпонованные пиксели могут накладываться поверх границ выделенной области.
• Горячие клавиши размера: Во время работы можно использовать клавиши [ и ] для быстрого изменения диаметра штампа.
• Непрерывное клонирование: Точка источника не сбрасывается после отпускания мыши. Вы можете сделать несколько мазков в разных местах, и они будут копировать пиксели из источника с одним и тем же изначально вычисленным смещением (вектором), пока вы не выберете новую точку источника через Alt+клик.

Инструмент «Заливка» (Ведро краски) в данном редакторе предназначен для быстрого заполнения больших областей одним цветом. Он анализирует пиксель, по которому был произведен клик, и заливает им все смежные пиксели схожего цвета, пока не встретит границу (перепад цвета).

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой ведра в левой панели инструментов или с помощью горячей клавиши G.
• Процесс заливки: Пользователь кликает левой кнопкой мыши по любой точке холста. Алгоритм считывает цвет (RGBA) пикселя в этой точке и сравнивает его с цветом всех соседних пикселей.
• Алгоритм (Flood Fill): В коде реализован классический алгоритм заливки с использованием стека (массива координат). Инструмент проверяет пиксели вверх, вниз, влево и вправо от начальной точки. Если цвет соседнего пикселя отличается от исходного не более чем на значение «Допуска», он перекрашивается, а его соседи также добавляются в стек на проверку. Процесс продолжается, пока не будут заполнены все подходящие области.
• Цвет: Заливка использует исключительно основной цвет (Foreground Color, FG), выбранный в панели цветов. Учитывается также текущая настройка непрозрачности (вычисляется альфа-канал).
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступен один ползунок:

• Допуск (0–255): Определяет, насколько сильно соседний пиксель может отличаться по цвету от исходного, чтобы попасть под заливку.
  • При значении 0 заливка сработает только на абсолютно идентичные пиксели (идеально для заливки плоских заливок в линейном арте).
  • При значениях ближе к 255 инструмент будет захватывать всё более отличающиеся оттенки, что полезно для заливки фотографий или градиентов со сглаженными краями (антиалиасингом).

3. Интеграция с историей и слоями

• Слои: Заливка работает только на активном (выбранном в правой панели) и видимом слое. Она заливает именно пиксели этого слоя, не затрагивая соседние.
• История (Undo/Redo): При клике мыши перед началом заливки текущее состояние слоя сохраняется в стек отмены (undoS). После завершения алгоритма стек обновляется. Это позволяет отменить результат заливки одной кнопкой Ctrl+Z.

4. Ограничения и особенности в данной реализации

• Игнорирование выделения: Это важная особенность кода. Инструмент «Заливка» не ограничивается активным выделением (маска отсечения applyClip не применяется). Даже если у вас есть активное выделение, заливка разольется за его пределы, если пиксели за границей совпадут по цвету с допуском. Чтобы залить строго внутри выделения, нужно использовать пункт меню «Правка» -> «Залить выделение цветом».
• Отсутствие сглаживания (Anti-aliasing): Алгоритм работает по принципу «да/нет» (цвет подходит или нет). Он не сглаживает границы заливаемой области. Если кликнуть по градиенту с антиалиасингом, по краям заливки может остаться тонкая кайма (ореол) из пикселей, цвет которых не попал в допуск.
• Прямая замена альфа-канала: Инструмент не использует режимы наложения (Blending Modes). При непрозрачности 100% он полностью заменяет значения RGBA старых пикселей на новые. При непрозрачности меньше 100% он заменяет альфа-канал на рассчитанное значение, а не мягко смешивает старый и новый цвета.
• Заливка только сплошным цветом: Инструмент не поддерживает заливку узорами (Patterns) или градиентами (для градиентов существует отдельный инструмент).

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

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой полос в левой панели инструментов. Горячая клавиша для него не назначена.
• Процесс создания: Пользователь зажимает левую кнопку мыши на холсте (начальная точка) и тянет курсор к конечной точке. Вектор, проведенный между этими точками, определяет направление и длину градиента.
• Предпросмотр: В реальном времени при движении мыши вызывается функция gradPreview, которая рисует будущий градиент на вспомогательном слое (overlayCanvas). Это позволяет увидеть результат до того, как кнопка мыши будет отпущена.
• Применение: При отпускании кнопки мыши градиент окончательно отрисовывается на активном слое, а вспомогательный слой очищается. Используется стандартный метод Canvas API createLinearGradient.
• Цвета: Градиент всегда строится от основного цвета (Foreground, FG) к фоновому цвету (Background, BG), выбранным в панели цветов.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступен только один ползунок:

• Непрозрачность (1–100%): Задает прозрачность градиентной заливки (параметр globalAlpha). При значении 100% цвета полностью перекрывают рисунок под ними, при меньших значениях сквозь градиент будет просвечивать нижний слой.
• Примечание: Настройки размера, жесткости или типа градиента (радиальный, конический) в данном инструменте отсутствуют.

3. Интеграция с историей, слоями и выделением

• Слои: Градиент рисует только на активном (выбранном в правой панели) и видимом слое.
• История (Undo/Redo): При нажатии кнопки мыши (начало создания градиента) текущее состояние слоя сохраняется в стек отмены (undoS). Это позволяет отменить результат одной кнопкой Ctrl+Z.
• Уважение к выделению (Маска отсечения): Важная особенность инструмента — в отличие от Кисти или Заливки, Градиент ограничивается активным выделением (вызывается applyClip). Если у вас создано прямоугольное, эллиптическое выделение или лассо, градиент зальется только внутри этой формы, четко обрезавшись по ее границам.

4. Ограничения и особенности в данной реализации

• Поведение без выделения: Если на холсте нет активного выделения, градиент при применении заливает весь холст целиком (fillRect(0,0,W,H)), а не только область под вектором мыши. Вектор лишь задает направление и длину перехода цветов.
• Только линейный тип: Инструмент поддерживает исключительно линейный градиент (Linear). Создать радиальный (круговой) градиент средствами этого инструмента нельзя.
• Только два цвета: Переход возможен строго между двумя цветами (FG и BG). В коде не предусмотрено добавление промежуточных точек (stops) для создания многоцветных градиентов.
• Обратное направление: Чтобы изменить направление градиента (какой цвет будет слева, а какой справа), можно либо поменять местами цвета кнопкой со стрелками в панели цветов, либо просто рисовать вектор в обратную сторону.

Инструмент «Пипетка» в данном редакторе предназначен для получения цвета с уже нарисованного изображения. Он позволяет быстро взять нужный оттенок прямо с холста и сделать его основным цветом (Foreground Color), чтобы затем рисовать им другими инструментами.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой пипетки в левой панели инструментов или с помощью горячей клавиши I.
• Процесс выбора цвета: Пользователь просто кликает левой кнопкой мыши по любой точке холста. Инструмент не требует перетаскивания (drag) — достаточно одиночного клика.
• Алгоритм считывания: В месте клика инструмент обращается к функции dCtx.getImageData, которая считывает данные ровно одного пикселя (размером 1х1) по координатам курсора.
• Источник данных: Важная особенность данного кода — пипетка считывает цвет не с активного слоя, а с итогового отображаемого холста (displayCanvas). Это значит, что она «видит» финальную картинку, где все видимые слои, их непрозрачность и режимы наложения (Blending Modes) уже смешаны воедино.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) для пипетки не предоставляется никаких ползунков или настроек. Выводится лишь информационный текст: «Кликните для выбора цвета».

3. Интеграция с историей, слоями и палитрой

• Слои: Инструмент игнорирует понятие «активный слой» для считывания. Он берет цвет со сплющенного изображения. Однако при работе инструмента сам активный слой не изменяется.
• История (Undo/Redo): Использование пипетки никак не затрагивает стек истории (undoS), так как инструмент не производит никаких изменений пикселей на холсте.
• Интеграция с интерфейсом: При клике считанный цвет немедленно назначается переменной основного цвета (fg). После этого вызывается функция updColor(), которая синхронизирует интерфейс: обновляет квадратик основного цвета, HEX-поле ввода, скрытый HTML-инпут цвета, а также перестраивает цветовое колесо (KellyColorPicker) в правой панели, устанавливая на нем курсор считанного цвета.
• Уведомление: При успешном взятии цвета в нижней части экрана появляется всплывающее уведомление (toast) с HEX-кодом выбранного цвета (например, «Цвет: #ff5733»).

4. Ограничения и особенности в данной реализации

• Игнорирование прозрачности (Альфа-канала): Пипетка считывает только значения RGB (красный, зеленый, синий). Значение прозрачности (Альфа-канал) пикселя в коде игнорируется. В результат всегда записывается максимальная непрозрачность (100%).
• Точечный захват: Инструмент всегда берет цвет строго из одного пикселя под курсором (1x1). В коде отсутствует настройка «усреднения» (Sample Size), которая позволяла бы брать средний цвет, например, из области 3x3 или 5x5 пикселей. Это может затруднять выбор цвета на фотографиях с цветовым шумом или градиентах.
• Запись только в Основной цвет (FG): Пипетка всегда копирует цвет только в ячейку Основного цвета (Foreground). В code нет возможности с помощью модификаторов (например, Alt) скопировать цвет сразу в Фоновый цвет (Background).
• Игнорирование маски выделения: Как и кисть, пипетка игнорирует активные выделенные области. Она считает цвет в любой точке холста, независимо от того, находится ли она внутри «бегущих муравьев» или снаружи.

Инструмент «Осветление» (Dodge) в данном редакторе предназначен для локального высветления пикселей на изображении. Он имитирует классический фотографический прием «осветление» (dodging), позволяя сделать темные участки изображения светлее без закраски их сплошным цветом.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой солнца в левой панели инструментов или с помощью горячей клавиши O.
• Процесс высветления: Пользователь зажимает левую кнопку мыши на холсте и ведет курсор.
• Механика изменения пикселей: При движении мыши инструмент захватывает квадратную область пикселей вокруг курсора (размер области зависит от настройки «Размер»). Затем алгоритм проверяет, какие пиксели попадают внутрь круга кисти (по формуле dx*dx + dy*dy <= r*r). Пиксели внутри круга подвергаются математическому изменению.
• Алгоритм высветления: Инструмент берет текущие значения красного, зеленого и синего (RGB) каналов каждого пикселя и умножает их на коэффициент 1.06. То есть за каждый такт обработки (каждый сдвиг мыши) яркость пикселя увеличивается на 6%. Значения ограничиваются функцией cl(), чтобы они не превысили максимум в 255 (чистый белый цвет).
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступен только один ползунок:

• Размер (2–200 px): Определяет диаметр области воздействия кисти. Радиус вычисляется как bSize / 2. Обратите внимание, что минимальный размер ограничен 2 пикселями.
• Примечание: В данном редакторе для инструмента «Осветление» отсутствуют настройки непрозрачности (Exposure), диапазонов (тени/средние тона/блики) и растушевки (жесткости краев).

3. Интеграция с историей и слоями

• Слои: Инструмент работает только на активном (выбранном в правой панели) и видимом слое. Он модифицирует пиксели непосредственно того слоя, на котором вы рисуете.
• История (Undo/Redo): При нажатии кнопки мыши (начало мазка) текущее состояние слоя сохраняется в стек отмены (undoS). При отпускании кнопки история обновляется, что позволяет отменить весь процесс осветления целиком одной кнопкой Ctrl+Z.

4. Ограничения и особенности в данной реализации

• Резкие края (Отсутствие растушевки): Алгоритм применяет эффект высветления ко всем пикселям внутри радиуса кисти одинаково. Граница между обработанными и необработанными пикселями будет резкой (ступенчатой), без плавного перехода. Использовать инструмент для мягкой ретуши портретов будет затруднительно.
• Кумулятивный эффект (Наслоение): Так как умножение на 1.06 происходит при каждом движении мыши, задержка курсора на одном месте приведет к быстрому накоплению эффекта — пиксели очень быстро выцветут до абсолютно белого цвета. Вести кисть нужно плавно и без остановок.
• Игнорирование выделения: Инструмент не ограничивается активным выделением (маска отсечения applyClip не вызывается). Он будет высветлять пиксели поверх любых границ выделенной области.
• Горячие клавиши размера: Во время работы можно использовать клавиши [ и ] для быстрого изменения диаметра кисти прямо в процессе.
• Воздействие на все тона: Инструмент слепо умножает значения RGB. Он не различает, находится пиксель в тенях или на свету, поэтому может легко "выбить" блики, сделав их пересвеченными (чисто белыми без деталей).
• Нет чувствительности к давлению: Инструмент не считывает силу нажатия пера графического планшета, сила воздействия всегда фиксирована на уровне 6% за такт.

Инструмент «Затемнение» (Burn) в данном редакторе предназначен для локального затемнения пикселей на изображении. Он имитирует классический фотографический прием «затемнение» (burning), позволяя сделать пересвеченные или слишком светлые участки темнее без закраски их сплошным цветом.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой луны в левой панели инструментов. Горячая клавиша для него не назначена.
• Процесс затемнения: Пользователь зажимает левую кнопку мыши на холсте и ведет курсор.
• Механика изменения пикселей: При движении мыши инструмент захватывает квадратную область пикселей вокруг курсора (размер области зависит от настройки «Размер»). Затем алгоритм проверяет, какие пиксели попадают внутрь круга кисти (по формуле dx*dx + dy*dy <= r*r). Пиксели внутри круга подвергаются математическому изменению.
• Алгоритм затемнения: Инструмент берет текущие значения красного, зеленого и синего (RGB) каналов каждого пикселя и умножает их на коэффициент 0.94. То есть за каждый такт обработки (каждый сдвиг мыши) яркость пикселя уменьшается на 6%. Значения ограничиваются функцией cl(), чтобы они не опустились ниже нуля (чистый черный цвет).
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступен только один ползунок:

• Размер (2–200 px): Определяет диаметр области воздействия кисти. Радиус вычисляется как bSize / 2. Обратите внимание, что минимальный размер ограничен 2 пикселями.
• Примечание: В данном редакторе для инструмента «Затемнение» отсутствуют настройки экспозиции (непрозрачности), диапазонов (тени/средние тона/блики) и растушевки (жесткости краев).

3. Интеграция с историей и слоями

• Слои: Инструмент работает только на активном (выбранном в правой панели) и видимом слое. Он модифицирует пиксели непосредственно того слоя, на котором вы рисуете.
• История (Undo/Redo): При нажатии кнопки мыши (начало мазка) текущее состояние слоя сохраняется в стек отмены (undoS). При отпускании кнопки история обновляется, что позволяет отменить весь процесс затемнения целиком одной кнопкой Ctrl+Z.

4. Ограничения и особенности в данной реализации

• Резкие края (Отсутствие растушевки): Алгоритм применяет эффект затемнения ко всем пикселям внутри радиуса кисти одинаково. Граница между обработанными и необработанными пикселями будет резкой (ступенчатой), без плавного перехода. Использовать инструмент для мягкой ретуши портретов будет затруднительно.
• Кумулятивный эффект (Наслоение): Так как умножение на 0.94 происходит при каждом движении мыши, задержка курсора на одном месте приведет к быстрому накоплению эффекта — пиксели очень быстро потускнеют до абсолютно черного цвета. Вести кисть нужно плавно и без остановок.
• Игнорирование выделения: Инструмент не ограничивается активным выделением (маска отсечения applyClip не вызывается). Он будет затемнять пиксели поверх любых границ выделенной области.
• Горячие клавиши размера: Во время работы можно использовать клавиши [ и ] для быстрого изменения диаметра кисти прямо в процессе.
• Воздействие на все тона: Инструмент слепо умножает значения RGB. Он не различает, находится пиксель в тенях или на свету, поэтому может легко "завалить" тени, сделав их абсолютно черными без деталей.
• Нет чувствительности к давлению: Инструмент не считывает силу нажатия пера графического планшета, сила воздействия всегда фиксирована на уровне 6% за такт.

Инструмент «Размывание» (Blur) в данном редакторе предназначен для локального сглаживания пикселей, уменьшения резкости и устранения мелких деталей на изображении. Он имитирует эффект оптического расфокусирования, смешивая цвета соседних пикселей внутри зоны действия кисти. Это популярный инструмент для ретуши кожи или смягчения жестких переходов на фотографиях.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой капли в левой панели инструментов. Горячая клавиша для него не назначена.
• Процесс размытия: Пользователь зажимает левую кнопку мыши на холсте и ведет курсор.
• Механика сглаживания: При каждом сдвиге мыши инструмент вырезает квадратную область пикселей вокруг курсора (размер области зависит от настройки «Размер»). Затем алгоритм проверяет, какие пиксели попадают внутрь круга кисти.
• Алгоритм (Box Blur): Для каждого пикселя внутри круга инструмент считывает значения цвета его самого и 8 окружающих его пикселей (матрица 3x3). Вычисляется среднее арифметическое этих 9 значений, и полученный результат записывается обратно в центральный пиксель. Это создает эффект потери фокуса.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступен только один ползунок:

• Размер (2–200 px): Определяет диаметр области воздействия кисти. Радиус вычисляется как bSize / 2. Обратите внимание, что минимальный размер ограничен 2 пикселями.
• Примечание: В данном редакторе для инструмента «Размывание» отсутствуют настройки силы (Intensity), непрозрачности и жесткости краев.

3. Интеграция с историей и слоями

• Слои: Инструмент работает только на активном (выбранном в правой панели) и видимом слое. Он модифицирует пиксели непосредственно того слоя, на котором вы рисуете.
• История (Undo/Redo): При нажатии кнопки мыши (начало мазка) текущее состояние слоя сохраняется в стек отмены (undoS). При отпускании кнопки история обновляется, что позволяет отменить весь процесс размывания целиком одной кнопкой Ctrl+Z.

4. Ограничения и особенности в данной реализации

• Аномалия одиночного клика: Как и у инструмента «Штамп», при одиночном клике (без перемещения мыши) срабатывает общая функция drawDot. Так как для размывания нет индивидуальной логики в этой функции, инструмент поставит точку основным цветом (FG) как обычная кисть. Эффект размытия срабатывает только при движении мыши (onmousemove).
• Не размывает прозрачность: Алгоритм цикла обработки пикселей жестко задан формулой for(let c=0;c<3;c++). Это означает, что инструмент усредняет только цветовые каналы (RGB), полностью игнорируя альфа-канал (прозрачность). Если на слое есть полупрозрачные пиксели, их прозрачность не будет сглаживаться.
• Кумулятивный эффект: Так как усреднение происходит при каждом такте движения мыши, задержка курсора на одном месте приведет к быстрому накоплению эффекта — пиксели очень быстро превратятся в однородное пятно. Вести кисть нужно плавно.
• Игнорирование выделения: Инструмент не ограничивается активным выделением (маска отсечения applyClip не вызывается). Он будет размывать пиксели поверх любых границ выделенной области.
• Резкие края кисти: Алгоритм применяет размытие ко всем пикселям внутри радиуса кисти одинаково. Граница между обработанными и необработанными пикселями будет резкой, без плавного перехода (растушевки).
• Высокая нагрузка на процессор: Инструмент работает напрямую с массивами пикселей (ImageData) при каждом сдвиге мыши. При использовании большого диаметра кисти на холстах высокого разрешения возможны зависания и лаги интерфейса.
• Горячие клавиши размера: Во время работы можно использовать клавиши [ и ] для быстрого изменения диаметра кисти.

Инструмент «Резкость» (Sharpen) в данном редакторе предназначен для локального повышения четкости краев и мелких деталей на изображении. Он усиливает контраст между соседними пикселями, делая размытые или нечеткие границы более выраженными. Это полезный инструмент для подчеркивания текстур (например, глаз, волос или листвы) на фотографиях.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой ромба в левой панели инструментов. Горячая клавиша для него не назначена.
• Процесс повышения резкости: Пользователь зажимает левую кнопку мыши на холсте и ведет курсор.
• Механика изменения пикселей: При движении мыши инструмент вырезает квадратную область пикселей вокруг курсора (размер области зависит от настройки «Размер»). Затем алгоритм проверяет, какие пиксели попадают внутрь круга кисти (по формуле dx*dx + dy*dy <= r*r). Пиксели внутри круга подвергаются математическому изменению.
• Алгоритм (Свёртка): Инструмент использует матрицу свертки (Convolution Matrix) размером 3x3 со значениями [0, -1, 0, -1, 5, -1, 0, -1, 0]. Для каждого пикселя алгоритм берет его собственное значение цвета, умножает на 5, а затем вычитает из него значения четырех соседних пикселей (сверху, снизу, слева, справа). Это математически усиливает разницу между пикселем и его окружением, делая границу более резкой.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступен только один ползунок:

• Размер (2–200 px): Определяет диаметр области воздействия кисти. Радиус вычисляется как bSize / 2. Обратите внимание, что минимальный размер ограничен 2 пикселями.
• Примечание: В данном редакторе для инструмента «Резкость» отсутствуют настройки силы воздействия (Strength), непрозрачности и растушевки (жесткости краев).

3. Интеграция с историей и слоями

• Слои: Инструмент работает только на активном (выбранном в правой панели) и видимом слое. Он модифицирует пиксели непосредственно того слоя, на котором вы рисуете.
• История (Undo/Redo): При нажатии кнопки мыши (начало мазка) текущее состояние слоя сохраняется в стек отмены (undoS). При отпускании кнопки история обновляется, что позволяет отменить весь процесс целиком одной кнопкой Ctrl+Z.

4. Ограничения и особенности в данной реализации

• Аномалия одиночного клика: Как и у инструментов «Штамп» и «Размывание», при одиночном клике (без перемещения мыши) срабатывает общая функция drawDot. Так как для резкости нет индивидуальной логики в этой функции, инструмент поставит точку основным цветом (FG) как обычная кисть. Эффект повышения резкости срабатывает только при движении мыши (onmousemove).
• Игнорирование прозрачности: Алгоритм цикла обработки пикселей жестко задан формулой for(let c=0;c<3;c++). Это означает, что инструмент применяет матрицу свертки только к цветовым каналам (RGB), полностью игнорируя альфа-канал (прозрачность).
• Кумулятивный эффект (Оversharpening): Так как свертка применяется при каждом такте движения мыши, задержка курсора на одном месте приведет к быстрому накоплению эффекта. Пиксели очень быстро станут гипертрофированно контрастными, что приведет к появлению цветового шума и ореолов (гало) вдоль краев. Вести кисть нужно плавно и без остановок.
• Игнорирование выделения: Инструмент не ограничивается активным выделением (маска отсечения applyClip не вызывается). Он будет повышать резкость пикселей поверх любых границ выделенной области.
• Резкие края кисти: Алгоритм применяет эффект ко всем пикселям внутри радиуса кисти одинаково. Граница между обработанными и необработанными пикселями будет резкой, без плавного перехода.
• Высокая нагрузка на процессор: Инструмент работает напрямую с массивами пикселей (ImageData) при каждом сдвиге мыши. При использовании большого диаметра кисти на холстах высокого разрешения возможны зависания и лаги интерфейса.
• Горячие клавиши размера: Во время работы можно использовать клавиши [ и ] для быстрого изменения диаметра кисти.

Инструмент «Линия» в данном редакторе предназначен для рисования прямых отрезков. Он позволяет быстро создавать ровные линии между двумя точками, что полезно для создания схем, геометрических набросков или жестких границ.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой минуса (черточки) в левой панели инструментов или с помощью горячей клавиши L.
• Процесс рисования: Пользователь зажимает левую кнопку мыши на холсте (начальная точка) и тянет курсор к конечной точке.
• Предпросмотр: В реальном времени при движении мыши вызывается функция shapePreview, которая рисует будущую линию на вспомогательном слое (overlayCanvas). Это позволяет увидеть, как будет выглядеть линия и под каким углом она пройдет, до того как кнопка мыши будет отпущена.
• Применение: При отпускании кнопки мыши линия окончательно отрисовывается на активном слое, а вспомогательный слой очищается. Для отрисовки используется стандартный метод Canvas API moveTo (перемещение к началу) и lineTo (проведение линии к концу) с последующим вызовом stroke().
• Окончания линии (Caps): В коде жестко задано свойство ctx.lineCap = 'round'. Это означает, что концы линии всегда будут закругленными, независимо от её толщины.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступны два ползунка:

• Толщина (1–50 px): Определяет ширину линии в пикселях (параметр lineWidth). Обратите внимание, что максимальная толщина ограничена 50 пикселями, в отличие от кисти, где максимум составляет 200 px.
• Непрозрачность (1–100%): Задает прозрачность линии (параметр globalAlpha). При значении 100% линия полностью перекрывает рисунок под ней, при меньших значениях сквозь нее будет просвечивать холст.
• Цвет: Линия всегда рисуется основным цветом (Foreground Color, FG), выбранным в панели цветов.

3. Интеграция с историей, слоями и выделением

• Слои: Линия рисует только на активном (выбранном в правой панели) и видимом слое.
• История (Undo/Redo): При нажатии кнопки мыши (начало создания линии) текущее состояние слоя сохраняется в стек отмены (undoS). Это позволяет отменить результат одной кнопкой Ctrl+Z.
• Уважение к выделению (Маска отсечения): Важная особенность инструмента — при финальной отрисовке на слой вызывается функция applyClip(ctx). Это означает, что если у вас создано прямоугольное, эллиптическое выделение или лассо, линия будет жестко обрезана по границам этой выделенной области. Она не вылезет за пределы «бегущих муравьев».

4. Ограничения и особенности в данной реализации

• Отсутствие привязки к углам: В коде не реализовано удержание клавиши Shift для рисования строго горизонтальных, вертикальных или диагональных (под 45 градусов) линий. Линия всегда проводится точно по вектору движения мыши.
• Только прямые отрезки: Инструмент позволяет нарисовать только один прямой отрезок за одно действие (от нажатия до отпускания мыши). Рисовать ломаные линии последовательными кликами (как, например, инструмент «Перо» или «Многоугольник») нельзя.
• Только сплошная линия: В настройках отсутствует возможность изменить стиль линии на пунктирный или штрихпунктирный. Линия всегда сплошная.
• Отсутствие сглаживания (Anti-aliasing): Как и в случае с другими фигурами, сглаживание краев зависит исключительно от браузерного движка Canvas API и не регулируется пользователем. При рисовании линий под углом, близким к 0, 45 или 90 градусам, края могут выглядеть слегка «зубчатыми» на больших толщинах.
• Горячие клавиши размера: Во время работы с инструментом можно использовать клавиши [ и ] для быстрого изменения толщины линии. Однако из-за того, что HTML-ползунок ограничен значением 50, попытка увеличить толщину сверх этой цифры через горячие клавиши изменит переменную в памяти, но визуально на ползунке это не отобразится (линия при этом нарисуется толще 50px).

Инструмент «Прямоугольник» в данном редакторе предназначен для рисования прямоугольных контуров или квадратов. Он позволяет быстро создавать ровные геометрические фигуры, что полезно для создания схем, рамок или графики с четкими линиями.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой квадрата в левой панели инструментов или с помощью горячей клавиши U.
• Процесс рисования: Пользователь зажимает левую кнопку мыши на холсте (начальная точка) и тянет курсор к конечной точке.
• Предпросмотр: В реальном времени при движении мыши вызывается функция shapePreview, которая рисует будущий прямоугольник на вспомогательном слое (overlayCanvas). Это позволяет увидеть размер и пропорции фигуры до того, как кнопка мыши будет отпущена.
• Применение: При отпускании кнопки мыши фигура окончательно отрисовывается на активном слое, а вспомогательный слой очищается. Для отрисовки используется стандартный метод Canvas API strokeRect, который рисует контур прямоугольника по заданным координатам и размерам.
• Окончания линий (Corners/Caps): В коде для инструмента жестко задано свойство ctx.lineCap = 'round'. Хотя это свойство влияет на концы линий, в случае с прямоугольником оно может делать углы слегка скругленными при большой толщине обводки.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступны два ползунка:

• Толщина (1–50 px): Определяет ширину контура прямоугольника в пикселях (параметр lineWidth). Обратите внимание, что максимальная толщина ограничена 50 пикселями, в отличие от кисти, где максимум составляет 200 px.
• Непрозрачность (1–100%): Задает прозрачность линии контура (параметр globalAlpha). При значении 100% фигура полностью перекрывает рисунок под ней, при меньших значениях сквозь нее будет просвечивать холст.
• Цвет: Прямоугольник всегда рисуется основным цветом (Foreground Color, FG), выбранным в панели цветов.

3. Интеграция с историей, слоями и выделением

• Слои: Фигура рисуется только на активном (выбранном в правой панели) и видимом слое.
• История (Undo/Redo): При нажатии кнопки мыши (начало создания фигуры) текущее состояние слоя сохраняется в стек отмены (undoS). Это позволяет отменить результат одной кнопкой Ctrl+Z.
• Уважение к выделению (Маска отсечения): Важная особенность инструмента — при финальной отрисовке на слой вызывается функция applyClip(ctx). Это означает, что если у вас создано прямоугольное, эллиптическое выделение или лассо, контур прямоугольника будет жестко обрезан по границам этой выделенной области. Часть фигуры, выходящая за пределы «бегущих муравьев», нарисована не будет.

4. Ограничения и особенности в данной реализации

• Только контур (Без заливки): Инструмент использует функцию strokeRect, что означает рисование исключительно контура (рамки). возможности нарисовать залитый сплошным цветом прямоугольник (fillRect) в данном инструменте не предусмотрено.
• Отсутствие привязки к квадрату: В коде не реализовано удержание клавиши Shift для рисования идеального квадрата с равными сторонами. Фигура всегда принимает форму той области, которую вы выделили мышью.
• Нет рисования от центра: Нет удержания клавиши Alt для рисования прямоугольника наружу от центральной точки клика.
• Скругление углов (Радиус): В коде не предусмотрен параметр borderRadius или аналогичный. Хотя концы линий скруглены из-за lineCap, классические прямоугольники со скругленными углами (как самостоятельная фигура) этим инструментом не нарисовать.
• Горячие клавиши размера: Во время работы с инструментом можно использовать клавиши [ и ] для быстрого изменения толщины контура. Однако из-за того, что HTML-ползунок ограничен значением 50, попытка увеличить толщину сверх этой цифры через горячие клавиши изменит переменную в памяти, но визуально на ползунке это не отобразится (хотя фигура нарисуется толще 50px).
  

Инструмент «Эллипс» в данном редакторе предназначен для рисования контуров эллипсов (овалов или кругов). Он позволяет быстро создавать ровные округлые геометрические фигуры, что полезно для создания схем, рамок или графики с плавными формами.

Ниже приведено полное описание инструмента и его возможностей на основе предоставленного кода.

1. Как работает инструмент

• Активация: Инструмент выбирается нажатием на кнопку с иконкой круга в левой панели инструментов. Горячая клавиша для него не назначена.
• Процесс рисования: Пользователь зажимает левую кнопку мыши на холсте (начальная точка) и тянет курсор к конечной точке. Эллипс вписывается в прямоугольную область, образованную этим движением мыши.
• Предпросмотр: В реальном времени при движении мыши вызывается функция shapePreview, которая рисует будущий эллипс на вспомогательном слое (overlayCanvas). Это позволяет увидеть размер и пропорции фигуры до того, как кнопка мыши будет отпущена.
• Применение: При отпускании кнопки мыши фигура окончательно отрисовывается на активном слое, а вспомогательный слой очищается. Для отрисовки используется стандартный метод Canvas API ellipse(), который вычисляет центр по диагонали выделенной области и рисует кривую с заданными радиусами.
• Окончания линий (Caps): В коде для инструмента жестко задано свойство ctx.lineCap = 'round'. Для замкнутых фигур, таких как эллипс, это свойство визуально почти незаметно, так как начальная и конечная точки контура смыкаются.
• Курсор: При наведении на холст курсор принимает форму перекрестия (crosshair).

2. Настройки инструмента

В верхней панели параметров (над холстом) доступны два ползунка:

• Толщина (1–50 px): Определяет ширину контура эллипса в пикселях (параметр lineWidth). Обратите внимание, что максимальная толщина ограничена 50 пикселями, в отличие от кисти, где максимум составляет 200 px.
• Непрозрачность (1–100%): Задает прозрачность линии контура (параметр globalAlpha). При значении 100% фигура полностью перекрывает рисунок под ней, при меньших значениях сквозь нее будет просвечивать холст.
• Цвет: Эллипс всегда рисуется основным цветом (Foreground Color, FG), выбранным в панели цветов.

3. Интеграция с историей, слоями и выделением

• Слои: Фигура рисуется только на активном (выбранном в правой панели) и видимом слое.
• История (Undo/Redo): При нажатии кнопки мыши (начало создания фигуры) текущее состояние слоя сохраняется в стек отмены (undoS). Это позволяет отменить результат одной кнопкой Ctrl+Z.
• Уважение к выделению (Маска отсечения): Важная особенность инструмента — при финальной отрисовке на слой вызывается функция applyClip(ctx). Это означает, что если у вас создано прямоугольное, эллиптическое выделение или лассо, контур эллипса будет жестко обрезан по границам этой выделенной области. Часть фигуры, выходящая за пределы «бегущих муравьев», нарисована не будет.

4. Ограничения и особенности в данной реализации

• Только контур (Без заливки): Инструмент использует функцию stroke(), что означает рисование исключительно контура (обводки). Возможности нарисовать залитый сплошным цветом эллипс (fill()) в данном инструменте не предусмотрено.
• Отсутствие привязки к кругу: В коде не реализовано удержание клавиши Shift для рисования идеального круга с равными радиусами. Фигура всегда принимает форму той области, которую вы выделили мышью.
• Нет рисования от центра: Нет удержания клавиши Alt для рисования эллипса наружу от центральной точки клика. Эллипс всегда строится по диагонали от начального клика к текущему положению курсора.
• Защита от ошибок: В коде радиусы эллипса вычисляются с помощью Math.max(1, ...). Это означает, что даже если вы просто кликнете мышкой (создав область с нулевой шириной и высотой), инструмент не выдаст ошибку, а нарисует микро-эллипс с радиусом 1 пиксель.
• Горячие клавиши размера: Во время работы с инструментом можно использовать клавиши [ и ] для быстрого изменения толщины контура. Однако из-за того, что HTML-ползунок ограничен значением 50, попытка увеличить толщину сверх этой цифры через горячие клавиши изменит переменную в памяти, но визуально на ползунке это не отобразится (хотя фигура нарисуется толще 50px).

 Меню «Файл»

• Новый: Очищает текущий проект и создает новый холст. Запрашивает ширину, высоту и тип фона (белый, прозрачный, черный). Инициализирует базовый слой.
• Открыть: Вызывает системный диалог выбора файла. Загруженное изображение помещается на новый слой поверх существующих, масштабируясь под размер холста.
• Сохранить: Сохраняет открытый файл
• Сохранить как: сохраняет полученное изображения в форматах png, jpeg, bmp, gif, psd

Меню «Правка»

• Отменить / Повторить: Управление историей. Редактор хранит до 50 снимков состояния каждого слоя в стеках

• Выделить всё: Создает прямоугольное выделение размером во весь холст 

• Снять выделение: Очищает переменную выделения и скрывает «марширующих муравьев».

• Вырезать на новый слой: Извлекает пиксели из активного выделения, удаляет их с текущего слоя и помещает на автоматически созданный новый слой выше.

• Удалить выделенное: Очищает пиксели внутри выделения на активном слое

• Обрезать до выделения: Изменяет размеры холста (W и H) под рамку выделения, пересчитывая координаты пикселей для всех слоев и масок.

• Залить выделение цветом: Заливает область выделения основным цветом.

• Обвести выделение: Обводит контур выделения линией заданной толщины.

 Меню «Вид»

• Масштаб (Увеличить / Уменьшить / По размеру / 100%): Управляет трансформацией контейнера холста. Диапазон от 10% до 800%.

• Сетка: Включает наложение на холст полупрозрачной сетки с шагом 50px (для удобства выравнивания).

• Направляющие: Включает отображение линий. Можно добавить горизонтальные/вертикальные направляющие (по умолчанию по центру) или очистить их. Не печатаются при сохранении.

 Меню «Изображение»

• Размер изображения: Интерполирует (масштабирует) пиксели всех слоев под новые размеры (изменяет разрешение документа).

• Размер холста: Изменяет рабочую область, не меняя масштаб самих пикселей. Если размер уменьшается, края обрезаются; если увеличивается — добавляется пустое пространство.

• Повороты (90°, 180°): Поворот всего проекта. Использует трансформации для перерисовки каждого слоя и масок.

• Свободный поворот: Поворачивает содержимое слоев на произвольный угол от -180° до 180°.

• Отразить (по горизонтали / по вертикали): Зеркальное отражение

 Меню «Слои»

• Новый / Дублировать / Удалить: Стандартные операции управления стеком слоев. Дублирование копирует слоя, его прозрачность, режим наложения и маску.

• Объединить с нижним: Рендерит активный слой на нижележащий с учетом прозрачности и режима наложения, после чего удаляет активный слой.
• Объединить всё: Сводит все видимые слои в один единственный фоновый слой.
• Добавить / Применить / Удалить маску:
  • Добавить: Создает отдельный canvas для маски (по умолчанию белый — всё видно).
  • Применить: Изменяет альфа-канал самого слоя на основе маски и удаляет маску.
  • Удалить: Удаляет маску без применения.

Меню «Фильтры» (Матричная и попиксельная обработка)

Все фильтры работают с объектом активного слоя.

Размытие: Простой Box Blur (усреднение пикселей в квадрате 3x3) за 1-3 прохода.

Гауссово размытие: Многопроходный Box Blur (5 проходов), дающий более гладкий результат.

Размытие в движении: Смещает и усредняет пиксели вдоль заданного вектора (длина и угол).

Резкость: Применяет матрицу свертки, повышающую контраст на границах объектов.

Яркость/Контраст: Линейное смещение и изменение размаха яркости.

Яркость

Контраст

Оттенок/Насыщенность: Преобразование RGB в HSL, сдвиг H и S, обратный перевод в RGB.

Цветовой баланс: Независимое изменение каналов R, G, B в тенях, средних тонах и светах.

Уровни: Задание черной и белой точки с гамма-коррекцией.

Баланс белого: Корректировка соотношения красного и синего каналов на основе средней яркости.

Инверсия

Сепия

Чёрно-белое

Постеризация: (сокращение количества цветов)

Порог (черно-белое изображение по границе яркости)

Сочность (умное повышение насыщенности).

Пикселизация: Усреднение цвета в блоках заданного размера.

Рельеф: Матрица свертки для создания эффекта 3D-тиснения.

Обнаружение краев: Оператор Собела для выделения контуров.

Мультяшность:  Комбинация сглаживания, постеризации и обводки краев черным цветом.

Виньетирование: Затемнение краев изображения в зависимости от расстояния до центра.

Хроматическая аберрация: Радиальное разделение красного и синего каналов.

Шум

Зернистость пленки: Добавление случайного шума в RGB каналы.

Тепловая карта: Переназначение яркости пикселей в цветовой спектр от синего к красному.

Глитч: Случайное горизонтальное смещение строк изображения и блоков.

Калейдоскоп: Зеркальное отражение сегментов вокруг центра холста.

Соляризация: Инверсия светлых или темных участков в зависимости от порога.

 Блок «Цвет»

• Переключатель цветов основной / фоновый: Переключение и выбор основного (Foreground) и фонового (Background) цветов.

• Инновационная палитра выбора цвета: Интегрированный визуальный HSV Color Picker. Позволяет выбирать цвет по цветовому кругу (Hue) и квадрату насыщенности/яркости (Saturation/Value). Поля HEX-кода поддерживают ручной ввод.

• Кнопка смены режима: Быстрый обмен местами основного и фонового цветов.

 Блок «Навигатор»

• Миниатюрное отображение всего холста. На навигаторе рамкой выделена область экрана, которая в данный момент видна пользователю (полезно при сильном приближении).

Блок «Слои»

• Список слоев: Визуальные превью каждого слоя.
  • Иконка глаза — переключение видимости.
  • Двойной клик по названию — переименование слоя.

• Режим наложения: Выпадающий список из 12 режимов (Нормальный, Умножение, Осветление, Перекрытие и т.д.). Изменяет способ смешивания пикселей слоя с нижележащими.

• Непрозрачность: Ползунок прозрачности активного слоя от 0 до 100%.

• Кнопки управления: Добавить, Дублировать, Объединить с нижним, Удалить, Поднять, Опустить, Добавить маску.