[jmatjs]

The rendering slowness is probably because every cell is rendered as an individual little HTML5 canvas (two, one for off state and one for on state).

Some browsers have no problem at all with so many little canvases, but in firefox it causes a slowdown.

A solution that will hopefully be faster is to make one big canvas instead of many little ones, and blit the cells on it every frame instead of using CSS visibility to swap between on and off states for each cell. Such rewrite of the rendering engine is a todo.

[52-6F-62]

I was having the same problem using Chrome.

It seems there are just simply too many elements generated for some of the examples.

It would probably be possible to draw an interactive version to a single canvas— but probably more complex on the development end.

---

Beyond that, it's awesome!

[jmatjs]

It's now updated with a new faster renderer (one big canvas instead of many little ones), does it feel any faster now? Thanks!

[mmastrac]

Way better. Thanks!

[52-6F-62]

WAY faster!

[abritinthebay]

Any reason for not using canvas or some kind of framework like Vue/preact/etc?

[kroltan]

The problem here is not a lack of framework, but the overkill usage of elements.

I think even a game-like approach of using a single canvas and re-rendering the whole screen when something changes would be more efficient than manual DOM mutations.

[JustSomeNobody]

Not the OP but maybe because they wrote it in what they know and actually shipped.

[uuu8728dw8d8d]

Snarky comments will be ignored. ╭∩╮⎛○⏜⏟〤○⎞╭∩╮

[abritinthebay]

Wasn't snark, Mr Hostility. DOM manipulation is a very expensive operation and is abstracted by a lot of useful libraries - was wondering if there was a specific reason to not use them.

Canvas is another type of abstraction - and blitting to the screen is easier with it - so same applies.