Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
In this post I'll look at how to rotate and scale a rectangle so that it entirely covers the space it occupied before rotation. This is useful if you ever have to rotate an image without leaving gappy corners.
When trying to squeeze every last morsel of optimisation out of a canvas app, we need to be concerned about avoiding drawing anything we don't need to. This means anything that the user cannot possibly see should not be drawn. Lets take a look...
If you are used to using CSS selectors to work on the HTML DOM and wondering if there is anything similar in Konva? You might have looked in the docs and not found anything you recognise. Let me take you through what Konva has to offer for selecting...
It's fine for the official Konva zoom-at-a-point demo to take the stage from unusably small to ridiculously large because the focus is on the mechanism, not the user experience. But in the real world we need something better UX. Here's my take...
When you start zooming with Konva you quickly get frustrated about how to zoom relative to the mouse position pr center point and not the top-left corner of the stage. Here's how to get that fixed...
I'm generally interested in text layout for couple of side projects so I'm keen to see what Konva can do for me with its Text object. A little research shows the HTML canvas is a little light on text support, but Konva has your back...within limits...
Take your protein pills and put your helmet on, strap yourselves in and hold on tight - we're embarking on a rollercoaster ride to try and find a reliable, robust & repeatable approach to measuring line height on the HTML5 canvas.
A quick run through of some of the principles of working with text and breaking away from relying on textOut and Text object from the Konva HTML5 canvas library.