> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getmilana.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas Recording

> Enable recording of HTML canvas elements in Milana session replays.

By default, Milana does not record the contents of `<canvas>` elements — they appear as blank rectangles in replays. Enable canvas recording if your app uses canvas for charts, drawing tools, maps, or other visual content that is important to understand user behavior.

## Enable canvas recording

Pass `shouldRecordCanvas: true` in your init options.

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    <MilanaProvider
      productId="prd_YOUR_PRODUCT_ID"
      clientKey="key_YOUR_CLIENT_KEY"
      sessionInfo={{ environment: "production", version: "2.4.1" }}
      options={{
        shouldRecordCanvas: true,
      }}
    >
      <YourApp />
    </MilanaProvider>
    ```
  </Tab>

  <Tab title="Script Tag">
    ```javascript theme={null}
    Milana("init", "prd_YOUR_PRODUCT_ID", "key_YOUR_CLIENT_KEY",
      { environment: "production", version: "2.4.1" },
      { shouldRecordCanvas: true }
    );
    ```
  </Tab>
</Tabs>

## When to enable it

* **Charts and data visualizations** rendered on canvas (e.g. Chart.js, D3 with canvas renderer)
* **Drawing or annotation tools** where the canvas content is the core user experience
* **Maps** rendered on canvas (e.g. Mapbox GL, Google Maps)
* **Games or interactive simulations**

## Performance considerations

Canvas recording periodically snapshots the canvas content and includes it in the recording event stream. This increases payload size, which can affect:

* **Network usage** — larger event batches are sent to the ingest endpoint
* **Recording buffer** — sessions with frequent canvas updates fill the event buffer faster

<Warning>
  If your canvas updates at a high frame rate (e.g. 60fps animations), canvas recording can significantly increase payload size. Test in staging before enabling in production.
</Warning>

For apps with small or infrequently updated canvases (e.g. a static chart rendered once), the overhead is minimal.