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”

Konva – HTML5 Canvas bottoms-up

Or, how to get the Y-axis to go bottom-up when the normal situation is for it to increase from the top-down. While we are at it, we’ll develop the bones of a plotting class. I’ll be developing my code with the use of the Konva JS canvas library which is a wrapper for the HTML5Continue reading “Konva – HTML5 Canvas bottoms-up”

Konva – shape transform sharing is simple

So you have a shape with some transforms applied – you need to apply the same transforms to another shape. How do you do that ? It turns out that Konva gives us a simple means to accomplish the challenge. We can get the first shapes transform with the shape.getTransform() method, then with a littleContinue reading “Konva – shape transform sharing is simple”

Konva – using a shape’s transform to rotate points

The Konva HTML5 canvas lib has a very useful feature that can spit out the transform applied to a shape, and which we can borrow to rotate points without math. The example below illustrates the use of rect’s transform to position the corner circles. Codepen here. What is a transform ? I couldn’t find aContinue reading “Konva – using a shape’s transform to rotate points”

Konva – offscreen / ghost canvas

I had always created Konva stages by setting the container parameter to the selector of an existing HTML DIV element. Then I needed to create an image from canvas elements as a one-off which I would then draw into the main stage. So how to do that without having a physical, in-the-DOM container DIV? LookingContinue reading “Konva – offscreen / ghost canvas”

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”

Dev – HTML5 Canvas & the DOM explained, and why use a lib?

I’ve seen a few questions on The ‘Net around how the HTML5 canvas fits into the DOM and whether canvas content can be styled via CSS – here’s my explanation. I also mention a few libraries and why you would want to use them… The HTML5 canvas element arrived with HTML5 (Wikipedia). The canvas isContinue reading “Dev – HTML5 Canvas & the DOM explained, and why use a lib?”

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.”

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