Canvas

Enable a 2D drawing editor

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).

All settings are reflected in the front-end configurator when users open the Canvas editor.

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.