Konva – Stage.draw is dead, you did know, right?
If you know about Stage.draw() and that you don’t need to worry about it any more, don’t read this – put your feet up and have some cake. If you are at all fuzzy on the subject, read on…
Konva – what I learned building rtx – a rich text editor for HTML5 canvas
So I spent some time building a rich text editor as a side project. Here’s some of what I learned which I’m sharing so you can avoid the bear traps and subsequent pain! Lets take a look…
Konva – rubber band selection
Using a click-drag-rect to select objects visually is a staple of graphics UX – this is one way to do it with Konva. Lets take a look…
Konva – Stage, Layer & Node snapshot and download
Getting snapshot images of the stage, layer and nodes is straightforward once you know a couple of tricks – here they are…
Konva – Group is not draggable from a click on its empty space – what gives?
So there you are with a shiny new group – with a couple of shapes added to it. Click-dragging either shape will move the Group, but click-dragging the empty space doesn’t – what gives ? So – by design, the Group does not have a hitFunc. What? Ok – so when the Konva engine is…
JavaScript – working with Emoji’s or the café problem
Working with non-English languages or emoji’s and finding that strings get garbled or just don’t add up? Let me try to explain why…
Konva – A workaround for inaccurate Path measuring
Long story short, Konvas path measuring for Path.getLength() and Path.getPointAtLength() methods are broken. There’s a simple and higher performance fix with SVG – lets take a look….
JavaScript – my first bundler experience with TypeScript & Vite
I’ve developed with JavaScript for years but oddly never needed a bundler because I try not to stack dependencies by using the npm install process. This time there was no avoiding it but hell what a load of hassle – until I found Vite. Read all about it…
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
Some pointers for experienced devs about the differences between working with the HTML5 canvas 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 your…
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 it…
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 -…
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 making…
Konva – editing path points
I wondered how to edit the points on a path or line – here’s an answer. Both the Konva Line and Path use a list of points to draw themselves. The Line takes a simple array of x & y values whilst the Path wants a data definition composed of SVG drawing commands. I chose…
Konva – path point simplification with Simplify.js
Re-drawing a hand drawn line with too many points can hit performance. Using a lib like simplify.js we can reduce the points considerably to get a performance boost.
Konva – What the hell did the Transformer actually do to my shape?
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 ? Stop the world, I wanna get off. Ok,…
Loading…
Something went wrong. Please refresh the page and/or try again.
Follow My Blog
Get new content delivered directly to your inbox.
Coding for the long view 