In this short post I show you how to keep an oversized image inside a framing rectangle whilst allowing the user to position the image within the frame, with no gaps allowed. Here's the approach...
Free-drawn lines can be represented by the Line or Path shapes. Standard UX is that the user moves the pointer and we add a line point at the pointer position in each mouse-move event. But that makes for a lot of points. Can we reduce the number of points and retain the line? Lets see...
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...
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...
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...