Using KonvaJS as canvas with React

While running my internship at vBridge I’m working on a front-end based project, building a usable interface for users and needed a HTML canvas for that. Of course I couldn’t just use any kind of canvas or a normal HTML canvas. I needed to render different shapes or colors based on the specific situation the user is encountering. The project uses React to begin with. So the search for a usable canvas package with React started.

Packages that I found

While doing some research I came across some packages that all could have been a valid choice. The packages that stood out the most to me were:

Of course there’s also the standard HTML canvas which you can read more about here

There are probably a lot more available, but these are the ones that I found the most documentation of. Why I chose Kova, you can read below.

Why use Konva

So I went with Konva. Basically it would be easier to explain why I didn’t went with the other ones. I chose not to use React Art because it isn’t reactive and that is ofcourse one of the main aspects I’ll be needing. React canvas would have been a valid choice as well. It allows you to draw DOM-like elements on the canvas, but is not as easy to draw graphics, that’s where Konva and GoJS come in. Both are about drawing graphics in a performant way on the canvas. Konva integrates very easy with React since it has a specific React package called react-konva. Also, GoJS is not free-to-use in a production environment, so if I were to use GoJS, I had to explain to superiors why I needed to spend money. Since the differences are small, I chose Konva. There you have it.

Differences between KonvaJS and react-konva

So what’s the difference between the ‘normal’ Konva and react-konva packages. Well basically you can use Konva components in react-konva like so:

import React from "react";
import Konva, { Stage, Layer, Text, Rect, Circle } from "react-konva";

const App = () => {
  return (
    <Stage>
      <Layer>
        <Text text="hello from Konva" />
        <Rect fill="red" height="50" width="50" />
        <Circle fill="red" radius="60" />
      </Layer>
    </Stage>
  );
};

export default App;

Where this would translate in pure KonvaJS without react as follows

<html>
  <body>
    <div id="container"></div>
    <script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
    <script>
      // first we need to create a stage
      var stage = new Konva.Stage({
        container: "container", // id of container <div>
        width: 500,
        height: 500,
      });

      // then create layer
      var layer = new Konva.Layer();

      // create our shape
      var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 50,
        fill: "red",
      });

      // add the shape to the layer
      layer.add(circle);

      // add the layer to the stage
      stage.add(layer);

      // draw the image
      layer.draw();
    </script>
  </body>
</html>

code example from kanvajs.org

Ofcourse the React version is way easier! Konva also offers a lot of other features like:

Exporting to image
exporting all elements to SVG
events

events in konva

import React from "react";
import Konva, { Stage, Layer, Circle } from "react-konva";

const App = () => {
  const sayHello = () => {
    console.log("hello");
  };
  return (
    <Stage>
      <Layer>
        <Circle fill="red" radius="60" onMouseOver={sayHello} />
      </Layer>
    </Stage>
  );
};

export default App;

Easy right. This wil trigger the sayHello method everytime you hover over it. Ofcourse there are lots of other events and triggers available. Feel free to read about the on the Konva docs.

There are also a lot of Demo’s available for Konva and react-konva. See them here

Elian.codes