# Drawing

> Add creative dimensions to applications with PandaSuite's Drawing Component. Learn how to setup and customize it for unique user experiences with flexibility in controls and interactions.

https://docs.pandasuite.com/essentials/components/drawing/

**Add a creative dimension to your applications with this drawing module. Whether for educational applications for children or for advanced note-taking features, it offers you complete customization. You can define your own buttons, settings, and interactions for a unique user experience.**

[Image: Drawing module previewed on a smartphone: a panda to dress up and its buttons for size, colors, Eraser, Pencil, Undo, Redo and Reset]

## Add a free drawing area

The drawing module is not included by default in PandaSuite's components. To use it, you must download it separately.

To add a free drawing area:

1. **Download**: Start by downloading the [drawingboard.zip](https://github.com/pandasuite/html5-samples/releases/download/v1.0.16/drawingboard.zip) file. There is no need to decompress it.
2. **Opening PandaSuite Studio**: Launch PandaSuite Studio and add a [Web component](https://docs.pandasuite.com/essentials/components/web/) at the desired location for your drawing area.
3. **Component Configuration**: In the component properties, select the **Offline mode** and insert the `drawingboard.zip` file.
4. Display the drawing area: Double-click on the component in your workspace to activate the free drawing area.

## Drawing module properties

In the properties panel, located on the right, you will find the following options to customize your drawing module:

- **Pencil Color**: choose the color in hexadecimal format.
- **Pencil Size**: adjust the pencil size in pixels.
- **Background Color**: set the background color in hexadecimal format.
- **Local Storage**: activate or deactivate the local storage of your drawings.

## Customize the controls

The module offers great flexibility to create custom controls via triggers and actions:

1. Select a trigger: for example, a button.
2. Choose the action **Interact with a component** and select your Web component.

### Available actions:

- **Change color**: Create a custom palette.
- **Change size**: Adjust the pencil size.
- **Eraser mode**: Easily erase mistakes.
- **Pencil mode**: Switch between pencil and eraser.
- **Reset**: Erase your drawing saves.
- **Undo**: Delete the last stroke.
- **Redo**: Restore the last deleted stroke.
- **Clear web storage**: Clean up local storage.
- **Reset**: Start a new drawing.

### Available triggers:

- **On Drawing Start**
- **On Drawing End**

By following these steps and utilizing the many features of the PandaSuite drawing module, you can create a rich and interactive user experience for your applications. Happy creating!