Posted on • Edited on • Originally published atelian.codes
Using KonvaJS as canvas with React
While running my internship atvBridge 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 abouthere
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 calledreact-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:
importReactfrom'react'importKonva,{Stage,Layer,Text,Rect,Circle}from'react-konva'constApp=()=>{return(<Stage><Layer><Texttext="hello from Konva"/><Rectfill="red"height="50"width="50"/><Circlefill="red"radius="60"/></Layer></Stage>)}exportdefaultAppWhere this would translate in pure KonvaJS without react as follows
<html><body><divid="container"></div><scriptsrc="https://unpkg.com/konva@7.0.3/konva.min.js"></script><script>// first we need to create a stagevarstage=newKonva.Stage({container:'container',// id of container<div>width:500,height:500});// then create layervarlayer=newKonva.Layer();// create our shapevarcircle=newKonva.Circle({x:stage.width()/2,y:stage.height()/2,radius:50,fill:'red',});// add the shape to the layerlayer.add(circle);// add the layer to the stagestage.add(layer);// draw the imagelayer.draw();</script></body></html>code example fromkanvajs.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
importReactfrom'react'importKonva,{Stage,Layer,Circle}from'react-konva'constApp=()=>{constsayHello=()=>{console.log("hello")}return(<Stage><Layer><Circlefill="red"radius="60"onMouseOver={sayHello}/></Layer></Stage>)}exportdefaultAppEasy right. This wil trigger thesayHello method everytime you hover over it. Ofcourse there are lots of other events and triggers available. Feel free to read about the onthe Konva docs.
There are also a lot of Demo's available for Konva and react-konva. See themhere
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
