Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
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. A little research shows the HTML canvas is a little light on text support, but Konva has your back...within limits...
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.
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.
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.
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...
Someone on Discord asked it it was possible to make a star rating widget thing with Konva - the holes in the stars sounded like an interesting challenge. Here we go… TLDR: See the demo and code. This is a Vanilla JS solution, but @ivor adapted it for React here. The key technique for making holes in some foreground object is to set up clipping functions. In Konva, a clipFunc defines
Thinking about shape-point collision detection in a case where there are many shapes on the stage, and how to improve performance. Here's my explanation of those functions and an possibly better approach.
Someone asked on the Konva discord channel how to have a shape - in this case a group - be positioned and zoomed so that the shape fills the canvas view and is centered vertically and horizontally. Here's my answer...