> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Add a canvas source
This example adds animated circles that hover over a map by using a [`CanvasSource`](https://docs.mapbox.com/mapbox-gl-js/ja/api/sources/#canvassource). A `CanvasSource` is a data source that contains a [`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) which can store animations and place them in your browser.
In this example, the `CanvasSource` is added to the map when the map loads in. Once added, 5 circles are created, drawn onto the `CanvasSource` and stored in an array. The `CanvasSource` then loops through the array of circles, animating each of them moving around the map.
> Example code:
**JavaScript**
```html
Add a canvas source
```