Konva – Text what can it do?

I’m generally interested in text layout for couple of side projects so I’m keen to see what Konva can do for me with its Text object. I’m a fan of Konva, and I’m on a journey to understand it in as much depth as I can, and this is a step along the route. MyContinue reading “Konva – Text what can it do?”

Konva – HTML5 canvas text line height measurement

Take your protein pills and put your helmet on, strap yourselves in and hold on tight – we’re embarking on a rollercoaster ride to try and find a reliable, robust & repeatable approach to measuring line height on the HTML5 canvas. Am I trying too hard to sell this as exciting? There are two sectionsContinue reading “Konva – HTML5 canvas text line height measurement”

Konva – HTML5 Canvas text measuring

A quick run through of some of the principles of working with text and breaking away from relying on textOut and Text object from the Konva HTML5 canvas library. I’m assuming you’ll know enough JavaScript to follow along. For dealing with text in the context of the HTML5 canvas there are two points to beContinue reading “Konva – HTML5 Canvas text measuring”

Konva – HTML5 Canvas viewport optimisation

When trying to squeeze every last morsel of optimisation out of a canvas app, we need to be concerned about NOT drawing anything we don’t need to. This means anything that the user cannot possibly see should not be drawn. I’ll be showing how to know a node is offscreen using the Konva HTML5 canvasContinue reading “Konva – HTML5 Canvas viewport optimisation”

Konva – HTML5 canvas coin spin effect

This is something I made for fun when I was learning about Konva tweens and animation, and posted as a self-answered question on StackOverflow. The coin spin effect is done by scaling the X axis of the circle from 1 to 0 to 1 in a loop. The human brain is defeated by the simpleContinue reading “Konva – HTML5 canvas coin spin effect”

Konva – HTML5 canvas manual route drawing solution

This is from a StackOverflow answer I made in response to a request for a way to show a route on a map with bends. In essence this is manipulation of the points array for a Konva Line object. The user selects a point via a mouse click and that point goes into the pointsContinue reading “Konva – HTML5 canvas manual route drawing solution”