> For the complete documentation index, see [llms.txt](https://kb.motion.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.motion.cloud/motion-platform-software/tiles/tile-types/canvas-tiles.md).
# Canvas Tiles
Canvas Tiles let you place live Motion Tiles on top of an uploaded image, creating an interactive visual representation of a physical space, system, or piece of equipment.
For example, you can upload a floor plan, site map, equipment diagram, or photograph and position relevant tiles directly where the associated devices or sensors are located. Users can then view live values, navigate the Canvas, open tile details, group nearby tiles with Canvas Clustering, and use Motion Replay to review values from an earlier point in time.
Canvas Tiles display at full width within a linked Mosaic App and are fully supported on desktop and mobile.
### Common uses for Canvas Tiles
Canvas Tiles are especially useful when the physical location of a device or sensor provides important context.
Common examples include:
* Data center floor plans
* Building and room layouts
* Mechanical and electrical diagrams
* Equipment or system photographs
* Sensor deployment maps
* Site plans
* Mobile troubleshooting and inspection workflows
Instead of navigating a large dashboard containing hundreds of individual tiles and tile folders, users can locate and review data within a visual representation of the actual environment.
### Before you begin
Before creating a Canvas Tile:
1. Create the tiles that you want to place on the Canvas.
2. Prepare the image that will be used as the Canvas background.
3. Create or identify the Mosaic App where the Canvas will appear.
Canvas supports the following image formats:
* `.png`
* `.jpg`
* `.jpeg`
* `.webp`
The following tile types can be placed on a Canvas:
* Numeric tiles
* Toggle tiles
* Multi-choice tiles
* Tile folders
Other SuperTiles cannot be placed on a Canvas, and a Canvas Tile cannot be placed inside another Canvas Tile.
For more information about supported tiles, see Tile Types. To create the underlying tiles first, see [Creating Point-Based Tiles](https://kb.motion.cloud/motion-platform-software/tiles/creating-point-based-tiles?utm_source=chatgpt.com).
### Creating a Canvas Tile
#### Step 1: Open the Tiles area
Navigate to the **Tiles** area of the Motion Platform and select the option to add a new tile.
Select **Canvas** from the available SuperTile options.
#### Step 2: Configure the Canvas Tile
Enter the standard configuration information for the Canvas Tile, including its name, display name, profile, facets, tags, appearance, and linked Mosaic App.
Canvas Tiles use many of the same standard configuration options as other Motion Tiles. For more information, see [Configuring Motion Tiles](https://kb.motion.cloud/motion-platform-software/tiles/configuring-motion-tiles?utm_source=chatgpt.com).
#### Step 3: Upload the Canvas image
In the Canvas configuration view, upload the image that will be used as the Canvas background.
The uploaded image may be a floor plan, diagram, site map, photograph, or another visual that helps users understand where each tile belongs.
### Adding tiles to the Canvas
After uploading the image, you can place existing Motion Tiles on the Canvas.
#### Steps
1. Move your cursor over the desired location on the Canvas.
2. A small **+** icon appears at the selected location.
3. Select the **+** icon.
4. Search for and select the tile you want to add.
5. Repeat these steps to add additional tiles.
6. Select **Save** when you have finished configuring the Canvas.
The tile appears at the location selected on the image.
The same underlying tile can remain as a standalone tile in an app and can also be used on multiple Canvas Tiles.
#### Placing multiple tiles in the same location
Multiple tiles can be placed at the same Canvas location. When necessary, their display order can be adjusted from the tile’s configuration options.
### Removing or repositioning a tile
To remove a tile from the Canvas:
1. Open the Canvas configuration.
2. Select the placed tile.
3. Select the option to remove it.
4. Select **Save**.
Placed tiles cannot currently be dragged to a new position. To reposition a tile, remove it and add it again at the desired Canvas location.
### Linking a Canvas Tile to a Mosaic App
A Canvas Tile must be linked to a Mosaic App before it appears on an app dashboard.
You can link the Canvas during configuration by selecting the applicable app in the **Apps** section.
Select **Save** to apply the Canvas configuration and app linkage.
For more information about Mosaic Apps, see [Creating a Mosaic App](https://kb.motion.cloud/motion-platform-software/apps/creating-a-mosaic-app?utm_source=chatgpt.com) and [Configuring a Mosaic App](https://kb.motion.cloud/motion-platform-software/apps/configuring-a-mosaic-app?utm_source=chatgpt.com).
### Viewing and navigating a Canvas
Canvas Tiles display at full width within the linked Mosaic App.
From the Canvas, users can:
* View current tile values
* Zoom in or out
* Pan across the uploaded image
* Open details for an individual tile
* Enable Canvas Clustering
* Review historical values with Motion Replay
The icon and color used for each placed tile come from the configuration of the underlying Motion Tile.
When a tile does not yet have a current value, the Canvas displays a loading indicator until a value becomes available.
### Opening tile details
Select an individual tile on the Canvas to open its details in the tile drawer at the bottom of the screen.
The drawer displays the full tile information associated with the selected Canvas marker.
Select outside the drawer or close it to return to the full Canvas view.
### Alarm Badges on Canvas Tiles
When a tile displayed on a Canvas enters an alarm state, its mini tile displays a badge indicating whether the alarm is acknowledged or unacknowledged.
This makes it easier to identify active alarm states directly from the floor plan. Select the mini tile to display the expanded tile below the Canvas, where you can review the current alarm state and access the available tile actions.
For more information about viewing and managing alarms, see [Current Alarms](/motion-platform-software/alarms/current-alarms.md) and [Clearing/Acknowledging Alarms](/motion-platform-software/alarms/clearing-acknowledging-alarms.md).
### Using Canvas Clustering
Canvas Clustering makes it easier to navigate Canvas Tiles that contain many closely positioned data points.
To enable Canvas Clustering, select the **layer** icon in the Canvas navigation controls.
When clustering is enabled:
* Individual tiles are grouped when the Canvas is zoomed far enough out.
* Each numbered cluster shows how many tiles are contained within that area.
* Clusters automatically separate into smaller groups or individual tiles as you zoom in.
* Clustering adjusts dynamically based on tile location and the current zoom level.
For example, a cluster containing 21 tiles may separate into two clusters containing 8 and 13 tiles as the user zooms further into the Canvas.
#### Viewing the tiles in a cluster
Select a numbered cluster to open the tile drawer.
The drawer displays the tile details for all tiles included in the selected cluster.
Zoom in to return to the individual tile markers within that area.
### Using Motion Replay
Motion Replay lets users view the Canvas and its tile values as they appeared at an earlier point in time.
The Motion Replay controls include:
| Control | Description |
| ---------- | ---------------------------------------------------------------------------- |
| **Older** | Moves backward through historical Canvas values. |
| **Newer** | Moves forward through historical Canvas values. |
| **Step** | Determines how far backward or forward the Canvas moves with each selection. |
| **Latest** | Returns the Canvas to the latest available values. |
#### Steps
1. Select the desired **Step** value.
2. Select **Older** to move backward through historical values.
3. Continue selecting **Older** or **Newer** to navigate through time.
4. Select **Latest** to return to current values.
Motion Replay updates the values shown across the Canvas, making it possible to review how conditions appeared throughout a physical environment at a previous point in time.
### Using Canvas Tiles on mobile
Canvas Tiles are fully supported in the Motion mobile experience.
Mobile users can:
* View the full Canvas
* Zoom and navigate around the uploaded image
* Select individual tiles
* Open tile details
* Interact with Canvas Clustering
* Use Motion Replay
This makes Canvas Tiles especially useful for technicians, engineers, and other users who need to review live data while physically moving through a building, site, or equipment area.
### Editing an existing Canvas Tile
An existing Canvas Tile can be configured from either the app dashboard or the Tiles area of the Platform.
#### From the app dashboard
1. Open the Mosaic App containing the Canvas.
2. Open the Canvas Tile options.
3. Select **Configure**.
#### From My Tiles
1. Navigate to **Tiles**.
2. Locate the Canvas Tile under **My Tiles**.
3. Open the tile menu.
4. Select **Configure Tile**.
From the configuration view, you can:
* Add tiles
* Remove tiles
* Change tile order
* Replace the background image
* Update the Canvas appearance
* Link or unlink apps
### Replacing the background image
You can replace the Canvas background image from the Canvas configuration view.
When the image is replaced, Motion preserves the existing tile coordinates as closely as possible. However, tile placement may appear different if the new image has different dimensions, proportions, or content.
Review the placement of existing tiles before saving the new image.
Select:
* **Save** to apply the changes.
* **Revert** to return to the previously saved Canvas configuration.
### Image best practices
For the clearest Canvas experience:
* Use an image with enough detail to identify important locations.
* Crop unnecessary whitespace or content before uploading.
* Use a consistent image orientation.
* Use an image that remains readable when viewed on both desktop and mobile.
* Compress unusually large image files while preserving the necessary detail.
* When replacing an existing image, use similar dimensions and proportions when possible to help preserve tile placement.
### Related articles
* [Creating Point-Based Tiles](https://kb.motion.cloud/motion-platform-software/tiles/creating-point-based-tiles?utm_source=chatgpt.com)
* [Configuring Motion Tiles](https://kb.motion.cloud/motion-platform-software/tiles/configuring-motion-tiles?utm_source=chatgpt.com)
* [Creating a Mosaic App](https://kb.motion.cloud/motion-platform-software/apps/creating-a-mosaic-app?utm_source=chatgpt.com)
* [Configuring a Mosaic App](https://kb.motion.cloud/motion-platform-software/apps/configuring-a-mosaic-app?utm_source=chatgpt.com)