react-konva - declarative canvas components for React

npm install react-konva konva

All common shapes for graphical applications

Support for desktop and mobile devices

Node nesting, grouping and event bubbling

Hight quality exports into data URLs, image data, or image objects

How it looks?

import { Stage, Layer, Rect, Circle } from 'react-konva';

export const App = () => {
return (
// Stage - is a div wrapper
// Layer - is an actual 2d canvas element, so you can have several layers inside the stage
// Rect and Circle are not DOM elements. They are 2d shapes on canvas
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect width={50} height={50} fill="red" />
<Circle x={200} y={200} stroke="black" radius={50} />
</Layer>
</Stage>
);
}

Demo