
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.
Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
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...