# Set up Click Behavior

In order to define what happens when a user click the Canvas, use the "Cursor Click Mode" field (see screenshot below).  This setting determines whether the clicking (and dragging) on the Canvas creates a drawing, a shape, adds text, or is simply used to select elements on the Canvas.

![](https://2486055478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOwxFzRfBRMCDtkHUwlsR%2Fuploads%2F6gS3dNYlOZ3IhPFz5EfA%2Fimage.png?alt=media\&token=4edb2595-0972-4e0a-a234-eb16e5b03035)

We typically use conditional statements to allow the user to decide what happens when they click on the Canvas. The conditional statements below refer to a state on the page that allows a user to set up the "Cursor Click Mode" by changing the dropdown's value (instead of using a state, you can also use a dropdown menu here):

![](https://2486055478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOwxFzRfBRMCDtkHUwlsR%2Fuploads%2F0NiPFB3ochknrRpEhHFW%2Fimage.png?alt=media\&token=55ff40ad-26ba-4922-bb2b-69bdd3c5fe8a)

Below is a reference to the 4 Click Modes:

### Mode 1: Free Draw/Paint

You access the **Free Draw/Paint** mode's properties on the element's Appearance tab:

![](https://2486055478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOwxFzRfBRMCDtkHUwlsR%2Fuploads%2FdUOb5JB0PV3GYtBGazI7%2Fimage.png?alt=media\&token=78d43173-5d22-4232-8cab-29977183689d)

In the example above, we've referred to dynamic values so that the user can define the color and width of the stroke from elements on the page.

### Mode 2: Draw Shape

You access the properties for the **Draw Shape** mode on the element's Appearance tab:

![](https://2486055478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOwxFzRfBRMCDtkHUwlsR%2Fuploads%2FEUX8RKBz5vHKfbsB6HWD%2Fimage.png?alt=media\&token=9c5196e0-e659-4ab3-923b-3b5837257063)

In the example above, we've referred to dynamic values so the user can determine the following attributes with the shape they intend to draw onto the Canvas:

1. Shape Color (Fill)
2. Shape Outline Color
3. Shape Outline Width (pixels)
4. Draw Shape Type (options: Rectangle, Triangle, Ellipse, Line)
5. Corner Radius (for Rectangles)

### Mode 3: Add Text

You can access the properties for the **Add Text** mode on the element's Appearance tab:

![](https://2486055478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOwxFzRfBRMCDtkHUwlsR%2Fuploads%2F7B3j7nlhaWM6jJ6IRqTm%2Fimage.png?alt=media\&token=6b1c759a-31ff-4c33-8496-3f22611b5eae)

In the example above, we've referred to dynamic values so that the user can determine the following attributes with the shape they intend to draw onto the Canvas:

1. Text Color
2. Text Size
3. Default Text

### Mode 4: Select Elements

When the Cursor Click Mode is set to "Select Elements", users who click on the Canvas in run-mode will not draw anything to the Canvas.  They will only be able to select element(s), move them, and resize them.

 ![](https://2486055478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOwxFzRfBRMCDtkHUwlsR%2Fuploads%2FFErxQMMGEwbgiieamnYk%2Fimage.png?alt=media\&token=79968eb5-a0d5-4382-ae3e-ae4b90224f2c)