Add all layers, shapes, and other nodes.

Will all that in mind, our algorithm looks pretty straightforward: It’s a long process, and it’s worth leveraging every small trick to make it faster. Some of them, like images, can be cached to improve the rendering performance even further.įor smooth animations, the app should generate at least 25 frames per second. Reusing the Konva layers and other nodes between frames also makes sense. We can significantly improve performance by reusing it between frames.įortunately, it’s possible and not that hard. Konva’s root Stage object is pretty heavy, as it’s the one creating the Canvas container in Node.JS.

You’re guaranteed to run out of memory in a proper backend that should run constantly.ĭoing it correctly from the start will save lots of debugging and refactoring time in the long run. While it doesn’t matter that much for our sample application that generates one video and exits, That’s especially important in the Node.JS environment, where it runs on top of the native Cairo library. It holds the whole node tree, and you have to do the memory management yourself.

Konva is a bit tricky for JavaScript developers.

The complete source code for this article is available on GitHub.įeel free to use it as a kick-starter for your projects. It’s been here for quite a while and became a robust go-to solution when dealing with videos. There’s a JavaScript FFmpeg port, but since the app would be running on the server, Stitching frames is also pretty straightforward. Node-canvas is a widespread Canvas API implementation for Node, built on top of Cairo, a native 2d graphics library. Konva also works in Node.JS on top of node-canvas using konva-node package. It enables developers to work with higher-level abstractions like Layers and shapes, just like in professional image editing software. Konva is one of the best canvas abstraction libraries in JavaScript. There are plenty of open-source tools to do that programmatically. Just generate each frame separately and stitch them to a single video. Did you know how easy it is to render videos in Node.JS?Įvery video consists of multiple frames combined in a sequence.

Ffmpeg js