Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
So what, you grabbed a transformer handle and stretched the rectangle and now you don't understand what gives with the width and height - they didn't change? You can see the freekin size changed but why are the width & height the same as before? Huh ? Ok, lets talk about it.
I needed to make a hole in an image so I took to Google and read up on Canvas and winding. Here's the result...
I was working on a minimap component and needed to generate a couple of layers with relatively random shapes - this is what I did...
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...