If you’ve done much work with the HTML5 canvas API, and especially if you’ve ever looked into performance tuning your canvas apps, you’ve likely come across the advice to batch your canvas calls together. For example, you may have read that when drawing multiple lines or shapes, it’s better to create a single path and only call your draw method once, drawing all lines and shapes in one go, than it is to draw each line or shape individually.

After I completed a working version of my 3D rendering engine wireframe.js, I started looking for ways to make improvements, both in terms of performance, and usability. While both efforts are still ongoing, there are a few things I have learned with regard to performance that I wanted to get down in writing.