This cheat sheet summarizes the complete HTML Canvas functionality, including shapes, styles & color, text, images, transformations, compositing & clipping, animation, pixel manipulation, hit regions & accessibility. It allows web developers to draw all sorts of graphics on the fly, using JavaScript. The tutorial is available to download for PNG, PDF formats and webpage on Skilled.co. The infographic below was designed by Skilled.co. Here, I listed some useful tips from that infographic.

Useful Tips

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.