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

# Canvas

## Overview

This tutorial will guide you through the **Canvas** option block in Simplio3D, a 2D editor allowing users to work with **text, colors, materials, images, and SVGs** as elements on a canvas. It enables customers to design products interactively by applying customizable elements on a 2D surface mapped onto a 3D model.

The **Canvas option set** is a new type of customization tool in Simplio3D that allows customers/configurator users to edit a **2D canvas** mapped to a 3D model’s UV layout.\
It supports:

* **Materials** (colors)
* **Textures/Images**
* **SVGs (vector graphics)**

## Adding a Canvas option block

* **Go to Products**\
  Open the product configurator you want to edit.
* **Add Option Set Block**
  * In the **Option Set dropdown menu**, select **Canvas**.
  * Click **Add Block** (blue button).
* **Define Variant**

  * Each Canvas block can contain **only one variant.**
  * One Canvas variant represents a **2D editable canvas**.
  * For each variant, fill in:
    * **Title** (name displayed in configurator)
    * **Variant Name** (internal reference)
    * **Select 3D Model**
    * **Select 3D Part** (⚠️ only one 3D part can be selected)

  ➝ Once a part is selected, the system will **read its UV map** and display it in the 2D Canvas editor.

## Canvas Settings

Configuring **Canvas Settings**:

* **Textures category**
  * Select texture category to load in the canvas.
* **SVG category**
  * Select SVG category to load.
* **Colors category**
  * Select material category for color palettes.
* **Toggle Features** (Enable/Disable per variant):
  * Textures: Load textures
  * SVG: Load SVGs
  * Color selection (for text & vectors)
  * Control: Zoom, rotate, pan
  * Customer color: pick color tool
* **Grid**
  * Turn grid **ON/OFF**
  * Upload custom grid PNG (grid always overlays canvas).

{% hint style="info" %}
All settings are reflected in the **front-end configurator** when users open the Canvas editor.
{% endhint %}

## Canvas in the Front-End

From the customer perspective, the flow looks like this:

1. **Select Base Product Options**
   * Example: Choose sock color, size, and quantity.
   * ⚠️ The base **sock color** becomes the **background color of the canvas**.
2. **Open Canvas Editor**\
   When customers click on the Canvas option, a **2D editor popup** appears.
3. **Designing Inside Canvas**\
   Customers can:
   * Add text
   * Add vector shapes
   * Choose from textures/images
   * Upload custom images
   * Edit elements: duplicate, copy/paste, flip, delete, reorder (layer control)
   * Change colors (via picker or palette)
   * Enable/disable grid
   * Zoom, pan, rotate

## Example Workflow (Sock Customization)

1. User chooses **Sock Size** → **Sock Color** → **Quantity**.
2. User clicks **Customize** → Canvas editor opens.
3. User adds text + logo + custom pattern on sock.
4. User saves → Design is applied to 3D preview.
5. On checkout → Order summary includes **selected options** + **.SVG design file**.