Canvas features
Canvas is useful when JavaScript needs to draw pixels directly, but it is not a replacement for every HTML interface.
What you will learn
- Which problems Canvas is suited for
- When semantic HTML or SVG is a better choice
- What accessibility and performance responsibilities Canvas creates
Good use cases
- Games, charts, image editing, and freehand drawing
- Large numbers of simple visual objects that need custom rendering
- Animations where direct pixel drawing is appropriate
When to choose something else
Use HTML for text, forms, tables, and controls so the browser can provide semantics, keyboard behavior, and text selection. Consider SVG when shapes need to remain individually selectable or scale cleanly.
Important responsibilities
- Accessibility
- Canvas pixels are not automatically exposed as meaningful text. Provide a nearby explanation, labels, or an alternative interface.
- Resolution
- CSS scaling can make a drawing blurry. Account for device pixel ratio when sharpness matters.
- Performance
- Redraw only what is necessary and avoid creating excessive work in every animation frame.
- Security
- Cross-origin images can affect operations such as reading pixels. Understand CORS before using remote images.