canvas – Coding for the long view

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 – 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 – 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….

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 – React & Vue reactivity considerations HTML Canvas libs

This came up in a Discord discussion where someone asked why the objects on the canvas always changed regardless of the fact that one of their objects was set to be non-reactive.

Konva – HTML5 canvas synchronisation, part 2, peer-to-peer

In part 2 of my hacking a way to synchronise HTML5 canvases across browser windows, I’m taking the results from part 1 and making them work between browser windows via communications lib PeerJS.

Konva – HTML5 canvas synchronisation, part 1

Interactive whiteboard apps seem to be a popular use-case vector for the HTML5 canvas. I’m a fan of the Konva JavaScript 2d canvas library so I wondered what it would take to synchronise canvases. Design thoughts My end goal is a meeting or classroom-style whiteboard where there could be multiple users sharing and co-operating onContinue reading “Konva – HTML5 canvas synchronisation, part 1”

Konva – HTML5 Canvas text on a path

The canvas does not yet provide the same level of character manipulation and measuring functions as we might find in the Windows GDI or similar. But it does give us canvas.measureText() to measure character size. Combine that with path.getPointAtLength() and we can fit text to a path. Measuring Text To have any chance to fitContinue reading “Konva – HTML5 Canvas text on a path”

Dev – Developing an HTML5 canvas app? Why you should use a model

This is aimed at folks who are starting out writing apps that use the HTML5 canvas using JavaScript. There are many JavaScript canvas libs around to help you write visual apps and increase your overall productivity. This article is generic and about your planning of your app rather than being related to any one lib,Continue reading “Dev – Developing an HTML5 canvas app? Why you should use a model”