Konva - fill opacity without affecting stroke
Ever needed to have a rect with alpha applied to the fill bit not the stroke - here's how.
Members only
Tricks
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.
Members only
Konva - editing path points
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...
Members only
Konva - trap an image in a framing shape
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...
Members only
Konva - path point simplification with Simplify.js
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...
Members only
Konva - HTML5 canvas blur & spotlight effect
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...
Members only
Konva - Clip Regions with Holes
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...
Members only
Konva - a class to quickly put random shapes on test layers
I was working on a minimap component and needed to generate a couple of layers with relatively random shapes - this is what I did...
Members only