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.
Posts about Konva.js, the JavaScript library adding an object model and other super powers to the HTML5 canvas lib.
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...
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.
As the ClearScript faqtorial says ‘ClearScript is a library that allows you to add scripting to your .NET applications’. So – if you need to provide a scripting facility in your C# app then ClearScript might be an option. What can it do?