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.

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

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:

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:

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:

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.