← Back to blog

Published on 03/11/2021 21:47 by Elian Van Cutsem

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 (
        <Text text="hello from Konva" />
        <Rect fill="red" height="50" width="50" />
        <Circle fill="red" radius="60" />

export default App;

Where this would translate in pure KonvaJS without react as follows

    <div id="container"></div>
    <script src="https://unpkg.com/konva@7.0.3/konva.min.js"></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

      // add the layer to the stage

      // draw the image

code example from kanvajs.org

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

events in konva

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

const App = () => {
  const sayHello = () => {
  return (
        <Circle fill="red" radius="60" onMouseOver={sayHello} />

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

Written by Elian Van Cutsem

← Back to blog

Recent Blogposts

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.