Konva - Capture canvas animation to GIF in the browser
Various use cases require the ability to save multiple _frames_ from a canvas as an animated GIF. This isn't something the canvas can do out of the box. Lets dig into how to make it happen...
A tech blog giving usable explainers, advice, tools, tricks and techniques for the Konva JavaScript canvas library, the HTML5 canvas, and related subjects.
Various use cases require the ability to save multiple _frames_ from a canvas as an animated GIF. This isn't something the canvas can do out of the box. Lets dig into how to make it happen...
Brave browser has a sophisticated approach to protect from browser fingerprinting. Unfortunately this makes for problems for legitimate canvas apps. In this post I investigate, try to explain what I found and suggest a work-around.
Someone on the Konva Discord group had an issue loading a complex canvas on mobile via the Konva.Node.create() process. The app works fine on desktop but iPhone Safari is complaining about the canvas being too large. What gives?
Konva's clipFunc is usually used to trim off the edges of oversize images. The magic here is that if we draw an outer path clockwise and an inner path counter-clockwise, the area defined by the inner path becomes a hole! Let's look into it...
Konva has 2 ways of making things mvoe or change - the tween and the animation. Animations are more involved but more capable, whilst tweens are a simple option if the needs are few. In this short post we look at a simple tween.
I needed some niche automated testing for my keyboard and mouse handler for a canvas-focussed rich text editor control I'm working on. I have to mock a series of user actions and run multiple tests. I had to go DIY - here's what I made...
I’ve seen experienced devs crash and burn on the differences between working with the HTML5 canvas element and the HTML DOM. Here’s some short-cut learnings to help you refactor your brain the canvas way and keep you moving...
Users expect graphics apps to have a background - this gives them a sense of the shapes relationships and scale. This ingenious solution was proposed by @Kristofer[Borgware] and uses fillPatternImage to make an infinite background.