minute read time
Modern Devices & Browsers have a Lot of RAM
Compared to the gaming consoles of the past, which had mere megabytes at their disposal, today even a cheap smartphone is likely going to have several gigabytes of RAM available. This means you don't necessarily have to limit your game to an 8-bit aesthetic...but you still might anyway because you think it looks cool....
Arithmetic is Computationally Cheap
Canvas Operations are Cheap
DOM Operations are Expensive
While it may be tempting to move <div> tags around a backdrop (and perhaps even animate their backgrounds with css), too much of this will quickly bring your browser to a halt. This reinforces the point stated above: learning to manipulate a <canvas> is quite crucial to avoiding slowdowns.
Funny enough, this is the very same problem that has given rise to the Virtual DOM methodology used by frameworks like React and Vue, and it is the reason why jQuery as a UI framework tends to be less performant.
The Garbage Collector Lurks in the Background
Periodically, your browser "collects the garbage," so to speak, to avoid an infinitely growing usage of RAM (i.e. a memory leak). For a normal website, this is not a concern, but for a game that may need to run several thousand functions per second, a garbage collection cycle can cause noticeable, and even game-breaking, delays. Code instead must be written to reuse as many variables as possible, and anonymous functions must be almost entirely avoided in order to ensure a smooth experience.
I've also learned how to really appreciate the canvas tag and look for opportunities to use them here at Atypic to deliver cutting edge highly performant 2D and 3D graphics.