Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
Based on the learnings from an earlier clip regions article I thought I would cover how to make a spotlight effect since it has been asked for a few times on the discord channel. Here we go...
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...