1. Pre-render similar primitives or repeating objects on an off-screen canvas.
2. Avoid floating-point coordinates and use integers instead.
3. Don’t scale images in drawImage.
4. CSS for large background images.
5. Use multiple layered canvases for complex scenes.
6. Scaling canvas using CSS transforms.
7. Use the moz-opaque attribute (Gecko only).
8. Avoid unnecessary canvas state changes.
9. Batch canvas calls together.
10. Avoid the shadowBlur property whenever possible.
11. Try different ways to clear the canvas (clearRect() vs. fillRect() vs. resizing the canvas).
12. Render screen differences only, not the whole new state.
13. With animations, use window.requestAnimationFrame() instead of window.setInterval().
14. Be careful with heavy physics libraries.
Leave a Reply