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...
A user recently had a query regarding how to get the pixel color data for a point on the stage. This is quite easy, but there's a catch on high pixel density devices - think Apple devices like the MacBook and iPad. Here's the solution...
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!
Working with non-English languages or emoji's and finding that strings get garbled or just don't add up? Let me try to explain why...
I was curious about how to close Konva lines, and I wanted to explore what we can do with lines and animation - here's where it ended up.