How does KonvaJS handle drawing on the canvas

Question

I really like the Konva syntax

 <Shape> 
   <Layer>
     <Circle />
    </Layer>
  </Shape>

However the source code is confusing me. The way I understand <Circle /> does not actually return a DOM element in its render. Instead it draws on a Canvas that is defined above it.

How does it actually do this. Can someone point me to the code

score 1 · Accepted Answer · answered Dec 05 '18 at 16:25

Konva is a javascript framework that allows you to draw into the canvas in an object-oriented way. Overview: https://konvajs.github.io/docs/

You can think about it as "DOM (document object models) for the canvas". So you don't draw into canvas manually. You just change shapes.

That object model is NOT DOM of the browser (like document.body, divs and other elements). It is just plain javascript objects.

So react is for managing DOM (all elements) of your application. So I thought it will be a good idea to manage Konva shapes from react too (as it is too similar to DOM mindset). So I created react-konva https://konvajs.github.io/docs/react/.

react-konva is a bridge between react and konva.

So when you do

<Layer>
 <Circle />
</Layer>

it will not create DOM elements, it will create Konva nodes instead. From that nodes Konva will make a drawing.

Sure can you clarify as to how it creates a KonvaNode. Is just an arbritary .jsx class that does not extend React.Component. — Robert Lemiesz, Dec 05 '18 at 18:58
Currently, it does not extend `React.Component`, but it may in the future. — lavrton, Dec 05 '18 at 23:59

How does KonvaJS handle drawing on the canvas

1 Answers1