Declarative HTML5 Canvas with Konva and react-konva

Enter Konva and react-konva. All the benefits of declarative code, but rendered on the canvas.

I’m gonna let Anton Lavrenov, the author of Konva, explain:

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

That.

It’s exactly what we need to push our animated React apps to thousands of elements without spending too much time thinking about the how of rendering. Best leave the hairy details to somebody else.

Let me show you two examples:

1. Pushing our particle generator to 20,000 elements
2. An n-body collision simulator built with MobX

A particle generator pushed to 20,000 elements with Canvas

Our SVG-based particle generator caps out at a few thousand elements. Animation becomes slow, and time between each iteration of our game loop increases.

Old elements leave the screen and get pruned faster than we can create new ones. This creates a natural (but stochastic) upper limit to how many elements we can push into the page.

We can render many more elements if we take out SVG and use HTML5 Canvas instead. I was able to push the code up to around 20,000 smoothly animated elements. Then JavaScript became the bottleneck.

Well, I say JavaScript was the bottleneck, but monitor size plays a role too. It goes up to ...