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.
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.
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”
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.”
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 “Konva – The Transformer – a shape with a very particular set of skills”