svg64 | Convert SVG to base64 in Node and the browser | Animation library

Here's an approach to take. Load the images globally and call draw when image is loaded.

When you export an SVG to an image like that, you lose all styles that are not inline. After all, it doesn't have access to the CSS files any more, when it's encoded as base64. You are not the first to have encountered this problem, but if you want do do it yourself, you'd need to first traverse the SVG nodes, then get their styles using window.getComputedLayout(node), and then export it. Or you can change the D3 code to apply all styles directly onto the nodes using .attr() or .style().

If you're fine using outside tools, there are many just on github alone, like this one, this one, and this one. You can install them or just use their code as inspiration.

Use this code to pause the video and take screenshots. You can than use Whammy to generate a webm and convert it to whatever file format you like with ffmpeg

You must use keyframes in order to get the animation to render properly once you do that you will have no issues.

Just like you can't request a context 'B' after you got a context 'A', you can't transfer a DOM canvas's control to an OffscreenCanvas after you did request a context from that canvas.

Here you are using Konva.js library (that I don't particularly know) to initialize your DOM canvas. This library will need to access one of the available contexts (apparently the "2D" one) from that canvas. This means that when you will gain access to that canvas, a context will already have been requested by the library and that you won't be able to transfer its control to an OffscreenCanvas.

There is this issue on the library's repo, which points out that no later than 12 days ago they added some initial support for OffscreenCanvases. So I invite you to look at their example on how to proceed with that library.

An OffscreenCanvas in itself doesn't offer any performance boost compared to a regular canvas. It won't magically make your code that was running at 10FPS to run at 60FPS.
What it allows is to not block the main thread, and to not be blocked by the main thread. And for this, you need to transfer it to a Web Worker.

This means you may use it

• if you are afraid your canvas code can block the UI but you don't really require smooth animation always.
• if you are afraid your main thread may slow down your canvas animation - e.g if you have a lot of other stuff going on on the page.

But in your case, it seems that there is only your code running. So you will probably not win anything by going this route.

We saw that to really take advantages of an OffscreenCanvas, we need to run it in a parallel thread from a Web Worker. But Web Workers don't have access to the DOM.
This is a huge limitation and will make a lot of things way more harder to handle.

For instance, to draw your video, you currently have no other way than to use a element to play it first. The Worker script can't access that element, and it can't create one on its own thread. So the only solution is to create an ImageBitmap from the main thread and to pass it back to your Worker script.
All the hard work (video decoding + bitmap generation) is done on the main thread. It is worth noting that even though the createImageBitmap() method returns a Promise, when we use a video as source, the browser has no other choice than to create the Bitmap from the video synchronously.
So while getting that ImageBitmap for use in your worker, you are actually overloading the main thread, and if the main thread is locked doing something else, you will obviously have to wait it's done before getting your frame from the video.

An other big limitation is that currently* Web Workers can't react to DOM events. So you have to set up a proxy to pass the events received in the main thread to your Worker thread. Once again this requires your main thread to be free and a lot of new code.

Because, yeah, I believe this is where you should be looking if you want performance improvements.

I only gave it a quick look, but I already saw that you are using setInterval in a few places at high rate. Don't. If you need to animate something visible always use requestAnimationFrame, if you don't need the full speed, then add an inner logic to skip frames, but keep using rAF as the main engine.

You are asking the browser to do heavy actions every frames. For instance your svg part is creating a full new svg markup from the DOM node at every frame, then this markup is loaded in an (this mean the browser has to launch an entire new DOM for that image), and rasterized on a canvas.
This in itself will be hard to cope at high frame-rate, and an OffscreenCanvas won't help.

You are storing all the images as stills to produce your final video. This will take a lot of memory.

There is probably a lot of other stuff like that in your code, so review it thoroughly and search for what make your code not able to reach the screen refresh rate. Improve what can be, search for alternatives (for instance MediaRecorder might be better than Whammy when supported) and good luck.

*^{There is an ongoing proposal to fix that issue}