HTML5 canvas synchronisation with Konva, 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 “HTML5 canvas synchronisation with Konva, part 1”

HTML5 Canvas text on a path with Konva

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 “HTML5 Canvas text on a path with Konva”

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 “Developing an HTML5 canvas app ? Why you should use a model”

Konva – rotate a shape around any point with simple math.

Shape rotation starts conceptually simple, but gets frustratingly hard quite quickly once you move away from very simple cases. This article discusses the basics and provides working code to rotate any shape around any arbitrary point on the stage. This article mentions the Konva graphics library but the math in the function can easily beContinue reading “Konva – rotate a shape around any point with simple math.”

The Konva.Transformer – a shape with a very particular set of skills

Taking a look at how the Konva.Transformer works and how it can be styled. Any app that involves drawing shapes is going to need to transform them – make them wider, taller, rotate them, etc.  Typically that means you have to show which shape is the focus for the transformation, then provide some ‘handles’ atContinue reading “The Konva.Transformer – a shape with a very particular set of skills”