VanquishedWombat

Konva – Layer redraw detection

I’ve seen a few questions asking how to know when a layer gets redrawn. But first I’m going to tell you why you don’t generally need to do it:…

Konva – an intro to working with HTML Canvas for experienced JS + CSS devs

I’ve seen experienced devs crash and burn on the differences between working with the HTML5 canvas element and the HTML DOM. Here’s some short-cut learnings to help you refactor your brain the canvas way and keep you moving.

Konva – animation fun with lines

I was curious about how to close Konva lines, and I wanted to explore what we can do with lines and animation – here’s where it ended up.

Konva – Mouse position + pixelRatio will mess up your day

A user recently had a query regarding how to get the pixel color data for a point on the stage. This is quite easy, but there’s a catch on high pixel density devices – think Apple devices like the MacBook and iPad. Here’s the solution… TLDR: Here’s the sample code – try it on yourContinue reading “Konva – Mouse position + pixelRatio will mess up your day”

Konva – an approach to drag-bounds control for a group

Writing drag bound functions is easy with rectangular shapes like Konva.Rects and Konva.Images- but Konva.Groups have a few more unexpected challenges. Lets take a look at some of the assumption traps around the Konva.Group and see what we can do.

Thinking about an approach to do-undo-redo

Coding a project that needs an undo-redo feature? Me too – here’s my thinking from the end of the development on the subject based on my learnings coding a rich text editor. Let’s take your code editor as an example. Whether it’s VS Code or NotePad++, if you you type a letter then delete itContinue reading “Thinking about an approach to do-undo-redo”

HTML5 canvas – how to control scaling 101

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 ?

Konva – Point & shape collision detection

Someone asked about shape-point collision detection for the point under the mouse in a case where there are many shapes on the stage, and how to improve performance in relation to the Stage.getAllIntesections(), Stage.getIntersection() and Shape.intersects() methods. Here’s my explanation of those functions and an approach to improving hit detection. Just to be clear –Continue reading “Konva – Point & shape collision detection”

Konva – making a shape fill the view

The topic of how to get a shape to the front and center of the canvas view often arises. Here is my approach…

Konva – Star rating control

Someone on Discord asked it it was possible to make a star rating widget thing with Konva – the holes in the stars sounded like an interesting challenge. Here we go… TLDR: See the demo and code. This is a Vanilla JS solution, but @ivor adapted it for React here. The key technique for makingContinue reading “Konva – Star rating control”