Skip to main content

Intro

title: react-konva - declarative canvas components for React layout: react_page

npm install react-konva konva

All common shapes for graphical applications

Support for desktop and mobile devices

Node nesting, grouping and event bubbling

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

How does it look?​

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​