Improve performance of a HTML5 Canvas with particles bouncing around

To enhance the performance of Canvas with particles bouncing around, try the following:

  • Separate the calculations from the drawing.
  • Request a redraw after you have updated your calculations.
  • Optimize collision detection by not testing evert particle against each other.
  • Reduce callback usage.
  • Reduce function calls.
  • Inline.