So there I was, trying to place a new canvas element exactly over a Konva stage, which worked but the scaling was all wrong compared to the Konva output - what gives ?
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...
Thinking about shape-point collision detection in a case where there are many shapes on the stage, and how to improve performance. Here's my explanation of those functions and an possibly better approach.