Что делает этот инструмент
Художник — простой инструмент рисования на canvas. Рисование от руки кистью, добавление фигур (прямоугольники, круги, линии), ластик, текст и пользовательский цвет фона. Скачивание холста как PNG. Полезно для набросков, аннотаций, диаграмм и простых рисунков. Всё выполняется в браузере — без сервера.
Как использовать
- Выберите инструмент — Кисть, фигуры, ластик или текст.
- Рисовать — Клик и перетаскивание для кисти или фигур. Клик для размещения текста.
- Настройки — Размер кисти, цвет и заливка. Для фигур — обводка и заливка.
- Фон — Изменение цвета фона холста при необходимости.
- Загрузить — Сохранение холста как PNG.
- Очистить — Сброс холста для начала заново.
Как это работает
Холст — элемент HTML5 Canvas. Рисование через 2D-контекст: пути для кисти и ластика, rect/arc/line для фигур, fillText для текста. События мыши/касания захватывают штрихи и фигуры. Состояние холста хранится в памяти; скачивание через toDataURL('image/png'). Внешние библиотеки для основного рисования не используются — vanilla Canvas API. Blob URL только для скачивания.
Все вычисления выполняются в браузере. Никакие данные не отправляются на сервер.
Примеры использования
- Наброски — Быстрые рисунки и doodle.
- Аннотации — Пометки скриншотов или диаграмм.
- Диаграммы — Простые блок-схемы или вайрфреймы.
- Подписи — Быстрая подпись.
- Обучение — Демонстрация фигур и цветов.
Пример
- Кисть, красный, размер 5 → Красная линия от руки.
- Прямоугольник → Клик и перетаскивание для рисования прямоугольника.
- Текст → Клик для размещения текста; ввод в диалоге.
Ограничения
- Без слоёв — Один слой; undo/redo только через очистку.
- Без сохранения — Состояние холста теряется при перезагрузке.
- Базовые инструменты — Без градиентов, паттернов или продвинутых фильтров.
- Только PNG — Формат скачивания PNG; экспорт в JPEG или SVG недоступен.