Learn how to use the `canvas` element and its 2D context to clear, draw and repaint shapes from JavaScript-controlled data.
In the DOM you mutate nodes. In canvas you paint on a surface.
If you need independent semantic elements that can be focused and read separately, the DOM is often better. If you need many moving shapes or free drawing, canvas is a stronger fit.
Canvas does not remember a circle as a reusable object. If you want to change the picture, you store the data in JavaScript, clear the surface and draw again.
Everything starts with a canvas reference and its 2D context.
`getContext('2d')` gives you the object that exposes drawing methods for paths, rectangles, arcs, text and fills.
Before drawing a complex shape, `beginPath()` starts a fresh path so previous traces do not leak into the next one.
The stable pattern is clear, draw and repeat from the latest state.
When positions, sizes or colors change, it is usually simpler to clear the full canvas and draw the current state than to surgically remove individual traces.
That approach keeps each render deterministic and avoids visual leftovers.