<canvas> is one of the most widely used standards for rendering 2D graphics on the Web. It is used widely in games and complex visualizations. However, as Web sites and apps push canvas to the limits, performance begins to suffer. This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.
The following is a list of tips to improve performance:
- Pre-render similar primitives or repeating objects on an off-screen canvas.
- Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).
- Avoid floating-point coordinates and use integers instead.
- Avoid unnecessary canvas state changes.
- Render screen differences only, not the whole new state.
- Use multiple layered canvases for complex scenes.
- Avoid the
shadowBlurproperty whenever possible.
- With animations, use
- Test performance with JSPerf.