Putting a grid over a Konva diagram is a common use case so I thought I would explore some of the options and explain a little about what goes on when zooming the Stage.
Tag Archives: html5 canvas
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 – Zooming the stage under the mouse
When you start zooming with Konva you pretty quickly get frustrated about how to zoom relative to the mouse position and not the top-left corner of the stage. Here’s how to do that.
Konva – the Group, useful but spooky
The Konva group is a bit hard to pin-down, almost a normal shape but not quite. Its super-powers can be a bit challenging though once you understand a few fundamentals its got your back. Lets dive in…
Konva – Capture canvas animation to GIF in the browser
I’ve seen a number of questions regarding how to save an HTML5 canvas animation as an animated GIF. So, lets have at it…
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 – Animation for HTML5 canvas
I wanted to learn about animation on the canvas so I’m making a smooth spiral animation of the first 199 words or David Bowie’s ‘Space Oddity’ using the excellent Konva canvas library and its animation feature.
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”
Coding for the long view 