> For the complete documentation index, see [llms.txt](https://docs.lightact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lightact.com/content-mapping/canvas-mapping.md).

# Canvas Maps

{% hint style="info" %}
**Good to know**: Canvas Maps is the name of the window where you create canvas mappings.
{% endhint %}

## Creating and mapping to a canvas

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-dada8d6fe7cdd919846f52bef7b7a3b9acd588a7%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

You can create a canvas in **Canvas Maps** or **Thumbnails** windows.

<figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-296f59aabc644ede29b82bb2de774729c1153261%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

To render to a Canvas, select the canvas in the Mapping dropdown.

<figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-3246ee1ba90f4e5ecd15230e33296d09fe1f54e4%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

Alternatively, just drag from the canvas onto the layer.

## Canvas Maps window

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-0124f2bb3b4d702e89381bdda0fee6386b6ddad1%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

To map an entire canvas onto a viewport object, just drag from the arrow onto the viewport object.

### Mapping subareas

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-cf49d9b56efd30e9a74da6688e802bdb1c6df9d3%2FcreatingSubAreas.gif?alt=media" alt=""><figcaption></figcaption></figure></div>

You can of course map just a subarea of a canvas. To create a subarea you can Shift+drag on a canvas.

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-e4adfce130d91abe6c8f6cc80c5f07266cd4b78f%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

Alternatively, you can just right click to bring up the menu where you select **Create a subarea**.

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-cc1eb15a9946e5109a5305bd80153cbfe1dbb0c7%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

If you right click on an existing subarea, you'll bring up a menu where you can further **edit the subarea**.

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-af3dbbd7748c5a37b00ca1f1a082e81d11c84d88%2FmappingSubarea.gif?alt=media" alt=""><figcaption></figcaption></figure></div>

To map a subarea, just drag from the arrow onto the destination viewport object.

{% hint style="info" %}
**Good to know**: in relation to Canvas Maps, when we refer to a Mapping, we mean the connection between source (sub)area and the destination subareas.
{% endhint %}

### Editing the mapping

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-723f90493120d69bbc8e321910404dae9bd40bde%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

If you right click on the destination subarea, you can further edit the mapping. Explore various options. One of the most powerful one is **Create layout**.

### Mapping layout

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-2fa693a2cdedde4dd2db781b591c036749ac5e99%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

If you click on Create layout, you'll create a node Layout dedicated just to this particular mapping.

<figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-092ead34c15acd6be83276e4c95a685dfa0f0051%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

In this layout, you have all the power of LightAct's Layout system at your disposal. By default there is just one *Mesh Warp* node there, but you can add any other nodes you might want.

<div align="left"><figure><img src="https://3312042618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9sVaJpWJhPbmscipukhh%2Fuploads%2Fgit-blob-43fb17daaf792859b92dee3009a275533e567a70%2Fimage.png?alt=media" alt=""><figcaption><p>A screenshot of a Mesh warp inside a Mapping layout with the effect shown in the Viewport object.</p></figcaption></figure></div>
