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...
My approach to JS tracing and logging is a fairly formalised token based log switching. But fundamentally it's a console.log - could there be room for improvement! A recent instalment of Chris Ferdinandi's excellent daily developer tips email got me thinking...
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...
Coding a project that needs an undo-redo feature? Me too - here's my thinking from the end of the development on the subject based on my learnings coding a rich text editor.
I wanted to learn about animation on the canvas so I'm making a smooth spiral animation of the first 199 words of David Bowie's 'Space Oddity' using the excellent Konva canvas library and its animation feature.
Long story short, Konvas path measuring for Path.getLength() and Path.getPointAtLength() methods are broken. The math involved is very complex and its not surprising that there are bugs. But also there's a simple and higher performance workaround so on balance its not so bad Lets take a look....