Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
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.
In part 2 of my hacking a way to synchronise HTML5 canvases across browser windows, I'm taking the results from part 1 and making them work between browser windows via communications lib PeerJS.
Interactive whiteboard apps seem to be a popular use-case vector for the HTML5 canvas. I’m a fan of the Konva JavaScript 2d canvas library so I wondered what it would take to synchronise canvases.
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...
So I spent some time building a rich text editor as a side project. Here's some of what I learned which I'm sharing so you can avoid the bear traps and subsequent pain!