If you know about Stage.draw() and that you don't need to worry about it any more, don't read this - put your feet up and have some coffee & cake. If you are at all fuzzy on the subject, read on...
The canvas does not yet provide the same level of character manipulation and measuring functions as we might find in the Windows GDI or similar. But it does give us canvas.measureText() to measure character size. Combine that with path.getPointAtLength() and we can fit text to a path.
So you have a shape with some transforms applied - you need to apply the same transforms to another shape. How do you do that ?
I had always created Konva stages by setting the container parameter to the selector of an existing HTML DIV element. Then I needed to create an image from canvas elements as a one-off which I would then draw into the main stage. So how to do that without having a physical, in-the-DOM container DIV?
The Konva HTML5 canvas lib has a very useful feature that can spit out the transformations applied to a shape, and which we can borrow to rotate points without math. Lets take a look...
When we exchange position and size information with Konva, multiple coordinate systems come into play. We normally use the canvas or stage coordinates but others are available. Knowing which to use will save a lot of frustration later. Lets investigate...
A question I see sometimes is how can we know when the layer gets redrawn. Firstly I recommend that you don't sweat about this - Konva does a perfectly good job without you interfering. But if you absolutely have to there is a way. Let's take a look...
One of the features that Konva provides is the dragBoundFunc which lets us confine a shape within a rect. But how to make that work for a group where things can get a bit more tricky? Lets take a look...