# 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**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.simplio3d.com/learning-the-app/products/create-options/canvas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.