konvajs/konva

Что это?

Ключевые возможности

• 01Граф сцены, в котором у каждой фигуры есть собственные события и поведение при перетаскивании.
• 02Трансформации, анимация и послойный рендеринг в HTML5 Canvas.
• 03Экспорт сцен и фигур, а также кэширование сложных узлов.
• 04Официальные обёртки для React, Vue, Svelte и Angular.
• 05Модульная сборка, позволяющая включать только нужные фигуры и фильтры.
• 06Серверный рендеринг в Node.js с помощью node-canvas или skia-canvas.

Сценарии использования

• Создание браузерного редактора дизайна или изображений с объектами, которые можно выделять и трансформировать.
• Создание совместной онлайн-доски или инструмента для разметки изображений.
• Создание интерактивных диаграмм, блок-схем или карт с перетаскиваемыми узлами.
• Генерация изображений на основе рисунков на Canvas на сервере Node.js.

Быстрый старт

1. 1

   Установите Konva через npm

   npm install konva
2. 2

   Импортируйте Konva и создайте stage, layer и shape в проекте

3. 3

   Для серверного рендеринга в Node.js установите также canvas-бэкенд

   npm install konva canvas

Что важно знать

• !Для рендеринга в Node.js необходимо отдельно установить пакет canvas или skia-canvas вручную.
• !События DOM работают только в браузере, а поддержка функций canvas зависит от выбранного бэкенда.

В подборках

Темы

Частые вопросы

Что такое konva?

JavaScript-фреймворк для HTML5 Canvas, позволяющий создавать интерактивную 2D-графику, редакторы дизайна, онлайн-доски и диаграммы. Konva — это 2D-фреймворк для Canvas на JavaScript и TypeScript. Он использует модель графа сцены: каждая фигура — отдельный объект со своими событиями, перетаскиванием, трансформациями, анимацией, кэшированием и возможностями экспорта. Разработчику не нужно вручную перерисовывать пиксели.

konva можно использовать бесплатно? Какая у него лицензия?

konva распространяется с открытым исходным кодом под лицензией Other. Перед использованием в коммерческих продуктах проверьте условия лицензии.

konva всё ещё поддерживается?

Активно поддерживается. Последний коммит в konva — 5 нояб. 2026 г..

Для чего можно использовать konva?

Создание браузерного редактора дизайна или изображений с объектами, которые можно выделять и трансформировать. Создание совместной онлайн-доски или инструмента для разметки изображений. Создание интерактивных диаграмм, блок-схем или карт с перетаскиваемыми узлами. Генерация изображений на основе рисунков на Canvas на сервере Node.js.

Как установить konva?

Установите Konva через npm: npm install konva Импортируйте Konva и создайте stage, layer и shape в проекте Для серверного рендеринга в Node.js установите также canvas-бэкенд: npm install konva canvas

Где скачать konva?

Исходный код и инструкции по установке — на GitHub: https://github.com/konvajs/konva