Skip to content
Isaac Sukin edited this page Jun 24, 2013 · 3 revisions
  • Layers: Draw complex collections of things onto different Layers that do not need to be updated every frame. Then, simply draw the Layer itself onto the main graphics context in the magic draw() function. You can group elements onto the same Layer if they change with similar frequency. This performance tip is especially true for drawing text, because text renders very slowly (technically, this is because canvas has no glyph cache).
  • TileMaps: For very large worlds, you may want to track things in a TileMap because TileMaps have support for retrieving objects within a certain area. You can use this functionality to quickly process only objects in or near the viewport e.g. for collision, updating, or drawing.
  • Batches: If you are animating a lot of primitives, you may want to consider batching certain operations that change the canvas state. For example, you can batch line-drawing operations and only stroke them after finishing your moveTo() and lineTo() calls.
  • Scaling: If you are draw-bound and can live with a lower resolution, one way to speed up canvas operations especially on mobile browsers is to scale up the canvas using CSS rather than using a larger canvas. You can use World#scaleResolution() to do this.
  • Memory: You get part of this one for free -- H5CGB doesn't have a scene graph, so you don't have to worry about the framework leaking memory. Still, especially with large JavaScript applications, try to avoid rapidly initializing and discarding lots of objects. The more you can cache instead of regenerating during each frame, the better.
Clone this wiki locally