Konva - text with block background
Giving text a block color background with margin and padding is catered for well in CSS but not so easy in Konva where there is nothing as capable as CSS built-in. Here's some code to give you that feature.
A tech blog giving usable explainers, advice, tools, tricks and techniques for the Konva JavaScript canvas library, the HTML5 canvas, and related subjects.
Giving text a block color background with margin and padding is catered for well in CSS but not so easy in Konva where there is nothing as capable as CSS built-in. Here's some code to give you that feature.
Both the Konva Line and Path use a list of points to draw themselves. Someone asked about how to edit the points so I wrote this article and demo to explain...
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...
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...