React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

Overview

React Konva

Build Status Greenkeeper badge

ReactKonva Logo

React Konva is a JavaScript library for drawing complex canvas graphics using React.

It provides declarative and reactive bindings to the Konva Framework.

OPEN DEMO

An attempt to make React work with the HTML5 canvas library. The goal is to have similar declarative markup as normal React and to have similar data-flow model.

At the current moment, react-konva is not supported in React Native environment.

Currently you can use all Konva components as React components and all Konva events are supported on them in same way as normal browser events are supported.

Installation

npm install react-konva konva --save

Tutorials and Documentation

Example

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Stage, Layer, Rect, Text } from 'react-konva';
import Konva from 'konva';

class ColoredRect extends React.Component {
  state = {
    color: 'green'
  };
  handleClick = () => {
    this.setState({
      color: Konva.Util.getRandomColor()
    });
  };
  render() {
    return (
      <Rect
        x={20}
        y={20}
        width={50}
        height={50}
        fill={this.state.color}
        shadowBlur={5}
        onClick={this.handleClick}
      />
    );
  }
}

class App extends Component {
  render() {
    // Stage is a div container
    // Layer is actual canvas element (so you may have several canvases in the stage)
    // And then we have canvas shapes inside the Layer
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Text text="Try click on rect" />
          <ColoredRect />
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById('root'));

To get more info about Konva you can read Konva Overview.

Actually you don't need to learn react-konva. Just learn Konva framework, you will understand how to use react-konva

Core API

react-konva supports all shapes, that Konva supports with the same names, and also it supports all the same events like click, touchmove, dragend, etc with "on" prefix like onClick, onTouchMove, onDragEnd.

Getting reference to Konva objects

To get reference of Konva instance of a node you can use ref property.

class MyShape extends React.Component {
  componentDidMount() {
    // log Konva.Circle instance
    console.log(this.circle);
  }
  render() {
    return <Circle ref={ref => (this.circle = ref)} radius={50} fill="black" />;
  }
}

Strict mode

By default react-konva works in "non-strict" mode. If you changed a property manually (or by user action like drag&drop) properties of the node will be not matched with properties from render(). react-konva updates ONLY properties changed in render().

In strict mode react-konva will update all properties of the nodes to the values that you provided in render() function, no matter changed they or not.

You should decide what mode is better in your actual use case.

To enable strict mode globally you can do this:

import { useStrictMode } from 'react-konva';

useStrictMode(true);

Or you can enable it only for some components:

<Rect width={50} height={50} fill="black" _useStrictMode />

Take a look into this example:

import { Circle } from 'react-konva';
import Konva from 'konva';

const Shape = () => {
  const [color, setColor] = React.useState();

  return (
    <Circle
      x={0}
      y={0}
      draggable
      radius={50}
      fill={color}
      onDragEnd={() => {
        setColor(Konva.Util.getRandomColor());
      }}
    />
  );
};

The circle is draggable and it changes its color on dragend event. In strict mode position of the node will be reset back to {x: 0, y: 0} (as we defined in render). But in non-strict mode the circle will keep its position, because x and y are not changed in render.

Minimal bundle

By default react-konva imports full Konva version. With all the shapes and all filters. To minimize bundle size you can use minimal core version of react-konva:

// load minimal version of 'react-konva`
import { Stage, Layer, Rect } from "react-konva/lib/ReactKonvaCore";

// minimal version has NO support for core shapes and filters
// if you want import a shape into Konva namespace you can just do this:
import "konva/lib/shapes/Rect";

Demo: https://codesandbox.io/s/6l97wny44z

Usage with React Context

Due to a known issue with React, Contexts are not accessible by children of the react-konva Stage component. If you need to subscribe to a context from within the Stage, you need to "bridge" the context by creating a Provider as a child of the Stage. For more info, see this discussion and this react-redux demo. Here is an example of bridging the context (live demo):

import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Rect } from "react-konva";

const ThemeContext = React.createContext("red");

const ThemedRect = () => {
  const value = React.useContext(ThemeContext);
  return (
    <Rect x={20} y={50} width={100} height={100} fill={value} shadowBlur={10} />
  );
};

const Canvas = () => {
  return (
    <ThemeContext.Consumer>
      {value => (
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <ThemeContext.Provider value={value}>
            <Layer>
              <ThemedRect />
            </Layer>
          </ThemeContext.Provider>
        </Stage>
      )}
    </ThemeContext.Consumer>
  );
};

class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value="blue">
        <Canvas />
      </ThemeContext.Provider>
    );
  }
}

Comparisons

react-konva vs react-canvas

react-canvas is a completely different react plugin. It allows you to draw DOM-like objects (images, texts) on canvas element in very performant way. It is NOT about drawing graphics, but react-konva is exactly for drawing complex graphics on <canvas> element from React.

react-konva vs react-art

react-art allows you to draw graphics on a page. It also supports SVG for output. But it has no support of events of shapes.

react-konva vs vanilla canvas

Vanilla canvas is faster because when you use react-konva you have two layers of abstractions. Konva framework is on top of canvas and React is on top of Konva. Depending on the use case this approach can be slow. The purpose of react-konva is to reduce the complexity of the application and use well-known declarative way for drawing on canvas.

CHANGELOG

Note: you can find a lot of demos and examples of using Konva there: http://konvajs.github.io/. Really, just go there and take a look what Konva can do for you. You will be able to do the same with react-konva too.

Comments
  • Exporting canvas to image exports empty image

    Exporting canvas to image exports empty image

    How can I export the underlying canvas to an image using toDataURL? https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL I've tried assigning a ref to the <Stage ref={stage => { this.konvaStage = stage }} /> component, but I keep getting an empty canvas image when I try to export the image using this piece of code. How can I accomplish this? Thanks

    this.konvaStage.node.bufferCanvas.context.canvas.toDataURL()
    
    opened by kevgathuku 32
  • React Konva doesn't work with React 16.3 Context API

    React Konva doesn't work with React 16.3 Context API

    I am trying to use React 16.3 Context API based on render props with React Konva:

    import React from "react";
    import { Layer, Stage, Circle, Group, Line } from "react-konva";
    
    const { Consumer, Provider } = React.createContext({ width: 0, height: 0 });
    
    const ToolsLayer = () => (
      <Consumer>
        {({ height, width }) => (
          <Layer>
            <Group offsetY={-height} y={-42}>
              <Line
                points={[0, 0, width, 0, width, 42, 0, 42]}
                closed
                stroke="black"
              />
              <Circle radius={11} fill="red" stroke="black" x={21} y={21} />
              <Circle radius={11} fill="green" stroke="black" x={21 + 42} y={21} />
              <Group />
            </Group>
          </Layer>
        )}
      </Consumer>
    );
    
    export default function Canvas({
      width = window.innerWidth,
      height = window.innerHeight
    }) {
      return (
        <Provider value={{ width, height }}>
          <Stage width={width} height={height}>
            <ToolsLayer />
          </Stage>
        </Provider>
      );
    }
    

    And I get runtime error:

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    
    Check the render method of `ToolsLayer`.
    

    Reproducible demo: https://codesandbox.io/s/2o9j1r6l30

    opened by Guria 26
  • Please verify Image component loading behaviour

    Please verify Image component loading behaviour

    Hi!

    I am using this simple function to create image objects

    function imageFactory(x) {
      const rv = document.createElement('img')
      rv.src = x
      return rv
    }
    

    I use it in ES6 JSX like this:

    render() {
        return (
            <Stage width={707} height={267}>
              <Layer>
                <Image x={0} y={0} width={707} height={267} image={imageFactory(require('./images/image.jpg'))}/>
    // ...
    

    However, on a page with two such elements, sometimes one shows up, sometimes both, sometimes none.

    Should I be using some other approach?

    The require statement is from webpack and just returns a relative string to the image, so it should be all fine.

    opened by baadc0de 18
  • Does not work with react 16

    Does not work with react 16

    I was trying to update our app to the react 16-beta.2 and react knova is running into the following error. Any help would be appreciated.

    ERROR in ./~/react-konva/src/react-konva.js Module not found: Error: Can't resolve 'react/lib/React' in '.../react-konva/src'

    ERROR in ./~/react-konva/src/react-konva.js Module not found: Error: Can't resolve 'react-dom/lib/ReactInstanceMap' in '.../react-konva/src'

    ERROR in ./~/react-konva/src/react-konva.js Module not found: Error: Can't resolve 'react-dom/lib/ReactMultiChild' in '.../react-konva/src'

    ERROR in ./~/react-konva/src/react-konva.js Module not found: Error: Can't resolve 'react-dom/lib/ReactUpdates' in '.../react-konva/src'

    opened by ppong 17
  • Error when importing react-konva in nextjs

    Error when importing react-konva in nextjs

    So my error message is this

    Error: require() of ES Module /app/node_modules/konva/lib/Core.js from /app/node_modules/react-konva/lib/ReactKonvaCore.js not supported. Instead change the require of Core.js in /app/node_modules/react-konva/lib/ReactKonvaCore.js to a dynamic import() which is available in all CommonJS modules.

    Not quite the same as with #588 and the fixes suggested there (dynamic loading of components with ssr disabled) Seem to do nothing for me.

    I did this for my app component:

    
    import React from 'react';
    import dynamic from 'next/dynamic';
    
    import { wrapper } from '../stores';
    
    import '../styles/globals.css';
    import MainLayout from '../components/layouts/mainLayout';
    import AuthLayout from '../components/layouts/authLayout';
    
    const layouts = {
        default: MainLayout,
        auth: AuthLayout,
    };
    
    // eslint-disable-next-line react/prop-types
    const PortalApp = function ({ Component, pageProps }) {
        // eslint-disable-next-line react/prop-types
        const { layout } = Component;
    
        switch (layout) {
            case 'auth':
                return React.createElement(layouts.auth, null, <Component {...pageProps} />);
            default:
                return React.createElement(layouts.default, null, <Component {...pageProps} />);
        }
    };
    
    export default dynamic(() => Promise.resolve(wrapper.withRedux(PortalApp)), {
        ssr: false,
    });
    

    But I still get the error. Not sure what do to here or how to fix this.

    opened by OdifYltsaeb 16
  • How is Layer.add accessed?

    How is Layer.add accessed?

    I've been trying to add a new shape object to an existing Layer in response to a click event. (Feel free to tell me that's not how this package works 🤣) Just a quick sample to demonstrate what I've tried:

    import React from 'react';
    import { render } from 'react-dom';
    import { Stage, Layer, Circle } from 'react-konva';
    
    const myLayer = <Layer />;
    
    const App = () => <Stage>{myLayer}</Stage>;
    
    render(<App />, document.getElementById('root'));
    
    // Later when the user clicks on something, but we can try this now why not
    const myNewRuntimeElement = <Circle/>;
    
    myLayer.add(myNewRuntimeElement);
    

    BUT, this yeilds an error: TypeError: myLayer.add is not a function

    "Okay, well if its not here, where do I go?"

    I tried reaching into the Layer ref...

    
    let myLayerRef;
    const myLayer = <Layer ref={node => myLayerRef = node}/>;
    ...
    myLayerRef.add(myNewRuntimeElement);
    
    

    ...Which has the add function defined, but gives an error: TypeError: child.getParent is not a function.

    I get the same error if I pass the circle's ref to add, but that feels like a react anti-pattern rabbit hole I'd prefer not to go down. Is this something I can accomplish with this tool, and if so, how?

    Thanks! 😄

    opened by wademauger 13
  • use React.Portal to render DOM with konva

    use React.Portal to render DOM with konva

    Hi!

    Both konva and reac-konva is super cool. thanks for sharing and suporting.

    I'm trying to create some re-usable react components that support text input and edits (smth like https://konvajs.github.io/docs/sandbox/Editable_Text.html)

    It will be cool if it will be possible to use React Portal to render DOM input (textarea, content editable etc) in separate div. Currently, it throws an error in renderer as not supported konva element.

    Is it possible and what should be done to support Portal API to render DOM elements outside of canvas?

    opened by setdvd 13
  • Error when building with Webpack 2.5:

    Error when building with Webpack 2.5: "Module not found: Error: Can't resolve 'canvas'

    I am running into a webpack error with react-konva 1.1.3 and webpack 2.5:

    ERROR in ./~/konva/konva.js

    Module not found: Error: Can't resolve 'canvas' in '/******/node_modules/konva'

    @ ./~/konva/konva.js 251:19-36 @ ./~/react-konva/src/react-konva.js @ ./assets/js/index.js

    Thanks.

    opened by ay5000 13
  • ESM support

    ESM support

    I'm using this package with snowpack. I tried both konva.js and react konva. Konva.js works good, but react-konva caused error import not found: Layer

    opened by Tatamethues 12
  • Question: onDragEnd group children coordinates

    Question: onDragEnd group children coordinates

    Thank you for perfect library. I have some troubles with group with Rect children in it. I want to update coordinates of rects in onDragEnd group function:

    import React, { useState } from "react";
    import ReactDOM from "react-dom";
    import { Stage, Layer, Group, Rect } from "react-konva";
    
    import "./styles.css";
    
    const RECTS = [
      { x: 190, y: 220 },
      { x: 200, y: 130 },
      { x: 260, y: 130 },
      { x: 260, y: 220 }
    ];
    
    const DOT_LENGTH = 15;
    
    function App() {
      const [rects, setRects] = useState(RECTS);
      const [group, setGroup] = useState({ x: 0, y: 0 });
    
      const onDragEnd = e => {
        const group = e.target;
    
        const newRects = [...rects].map((item, index) => {
          const rect = group.findOne(node => {
            return node.className === "Rect" && node.name() === `${index}`;
          });
          const { x, y } = rect.getAbsolutePosition();
          // let x = rect.x(); let y = rect.y();
          // console.log(rect.getAbsolutePosition())
    
          return { x, y };
        });
    
        setRects(newRects);
        setGroup({ x: group.x(), y: group.y() });
      };
    
      return (
        <div className="App">
          <Stage width={1000} height={1000}>
            <Layer>
              <Group x={group.x} y={group.y} onDragEnd={onDragEnd} draggable>
                {rects.map((item, index) => (
                  <Rect
                    offsetX={DOT_LENGTH / 2}
                    offsetY={DOT_LENGTH / 2}
                    x={item.x}
                    y={item.y}
                    key={index}
                    name={`${index}`}
                    stroke="#000"
                    fill="#000"
                    strokeWidth={0}
                    width={DOT_LENGTH}
                    height={DOT_LENGTH}
                  />
                ))}
              </Group>
            </Layer>
          </Stage>
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
    

    Edit charming-morning-pcsvb

    But I see some jumping after it. Where is a problem?

    opened by mmarkelov 12
  • DragBoundFunc position incorrect on transformed stage

    DragBoundFunc position incorrect on transformed stage

    I implemented emulated screen scrolling of the canvas, using method 4 here: https://konvajs.org/docs/sandbox/Canvas_Scrolling.html#How-to-display-and-scroll-a-very-big-html5-canvas

    Esentially the stage is re-positioned when we scroll like this:

          const PADDING = 500;
          function repositionStage() {
            var dx = scrollContainer.current.scrollLeft - padding;
            var dy = scrollContainer.current.scrollTop - padding;
            stage.current.container().style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
            stage.current.x(-dx);
            stage.current.y(-dy);
          }
    

    Then I have a draggable rectangle with a dragBoundFunc like this:

    <Rect
              height={32}
              width={120}
              fill={'red'}
              cornerRadius={8}
              draggable
              dragBoundFunc((pos) => { 
                 console.log('position rectangle: ', pos) 
              }
    />
    

    When the stage is initial (top: 0 , left: 0) the dragboundfunc returns the correct position. But as soon as I scroll the stage a bit , the position provided by the dragboundfunc is incorrect...

    With the normal scrolling (not emulated) the dragBoundFunc position is always correct (even when the stage is scrolled)

    opened by jellohouse 11
  • TypeError: Cannot set properties of undefined (setting 'hook')

    TypeError: Cannot set properties of undefined (setting 'hook')

    I just installed react-konva to my ReactJS app and then this error appears rapidly even I move to another page.

    TypeError: Cannot set properties of undefined (setting 'hook')
        at d (<anonymous>:10:949)
        at c (<anonymous>:10:1426)
        at e (<anonymous>:10:1913)
        at e (<anonymous>:10:1931)
        at e (<anonymous>:10:1931)
        at e (<anonymous>:10:1918)
        at e (<anonymous>:10:1931)
        at e (<anonymous>:10:1918)
        at e (<anonymous>:10:1931)
        at e (<anonymous>:10:1931)
    

    image

    opened by ssrizkynugraha 0
  • how to fix yarn install react-konva konva run fail

    how to fix yarn install react-konva konva run fail

    Server Error Error: konva tried to access canvas, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

    Required package: canvas Required by: konva@npm:8.3.14 (via /Users/nitithorn/Desktop/flow/frontend/.yarn/cache/konva-npm-8.3.14-37d7faf6ad-a14ace4b62.zip/node_modules/konva/cmj/)

    Require stack:

    • /Users/nitithorn/Desktop/flow/frontend/.yarn/cache/konva-npm-8.3.14-37d7faf6ad-a14ace4b62.zip/node_modules/konva/cmj/index-node.js
    • /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/react-konva-virtual-0eb93ea69c/0/cache/react-konva-npm-18.2.3-225def8889-b18868527e.zip/node_modules/react-konva/lib/ReactKonva.js
    • /Users/nitithorn/Desktop/flow/frontend/.next/server/pages/workflow/builder.js
    • /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/server/require.js
    • /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/server/next-server.js
    • /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/server/next.js
    • /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/server/lib/start-server.js
    • /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/cli/next-dev.js
    • /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/bin/next
    opened by markLabel9822 0
  • Type information missing for onPointer events

    Type information missing for onPointer events

    Unlike other event types, onPointerUp/Down/Move events don't have corresponding props in the exported KonvaNodeEvents interface. This leads to issues in Typescript projects, like TS complaining about implicit typing, and those event handlers don't appear in auto-complete (initially leading me to believe they weren't supported, though in my limited testing it seems to work if I force my way around the missing type information).

    You can see the issue here in this codesandbox demo.

    Is it possible to include these events in the props as well? Or is there a reason they were left out?

    opened by blinz117 1
  • How can I render circles around rectangle in Konva js?

    How can I render circles around rectangle in Konva js?

    I need to render table and chairs like in this picture: Captura de Tela 2022-10-19 às 16 38 49

    I dont know how to calculate position of circles around rect. I tried some code, but its not working...Anybody knows how to solve it?

    opened by LuizProject46 3
  • Incompatibility of react-konva and konva libs

    Incompatibility of react-konva and konva libs

    Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/s/Developer/grade/node_modules/konva/lib/Core.js from /Users/s/Developer/grade/node_modules/react-konva/lib/ReactKonvaCore.js not supported. Instead change the require of Core.js in /Users/s/Developer/grade/node_modules/react-konva/lib/ReactKonvaCore.js to a dynamic import() which is available in all CommonJS modules.

    node version 18.10.0 Should I degrade konva version to make it work?

    opened by nikolai-shilin 1
Releases(v16.8.6)
Owner
konva
2d canvas framework
konva
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
A JavaScript library dedicated to graph drawing

sigma.js - v1.2.1 Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal. Resources The website pr

Alexis Jacomy 10.3k Jan 3, 2023
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 973 Jan 3, 2023
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 937 Feb 5, 2021
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
A renderer agnostic two-dimensional drawing api for the web.

Two.js A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, c

Jono Brandel 7.9k Dec 31, 2022
Perfect pressure-sensitive drawing for both iOS and Android.

rn-perfect-sketch-canvas A React Native component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer. Inst

Robert Soriano 75 Jan 3, 2023
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
Create graphics with a hand-drawn, sketchy, appearance

Rough.js Rough.js is a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw

Rough 17.8k Dec 30, 2022
A cross platform high-performance graphics system.

spritejs.org Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-prog

null 5.1k Dec 24, 2022
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Raphael Amorim 1.5k Jan 4, 2023
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023