# Workflow Actions

You can access the plugin's list of workflow actions by:

1. Opening the workflow tab (make sure you've already added the Canvas-Main element to your page
2. Add your Trigger event (e.g. when a button is clicked)
3. Add a workflow action
4. Navigate to the "Element Actions" section

![](https://2486055478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOwxFzRfBRMCDtkHUwlsR%2Fuploads%2F0c2kILtQ4mMy28zn23rs%2Fimage.png?alt=media\&token=924633ec-77cf-49b4-81be-88a997dedc89)

Below is a list of all of the workflow actions associated with the Canvas-Main element along with a description of what it does and how to use it:

**Workflow Actions (Workflow Tab)**

<table><thead><tr><th width="204.4180355258319">Action Name</th><th width="199.57366547222767">Fields</th><th>Description</th></tr></thead><tbody><tr><td>Save (as PNG to URL)</td><td><ul><li>Image Height (px)</li><li>Image Width (px)</li><li>PNG File Name</li></ul></td><td>Use this workflow action to save a .png image of your canvas to your database. Full instructions <a href="../../canvas-using-the-plugin/saving-the-canvas#save-as-png-to-url">here</a>.</td></tr><tr><td>Save (as Serialization)</td><td>N/A</td><td>Use this workflow action to save a JSON that represents your Canvas.  You can then load it to continue editing in another session.  Full instructions <a href="../../canvas-using-the-plugin/saving-the-canvas#save-as-serialization">here</a>.</td></tr><tr><td>Download Canvas (sets link to download)</td><td>HTML id Attribute, Name of file</td><td>Due to some Bubble and JavaScript limitations, you'll need to add a link to your Bubble page and closely follow the instructions <a href="../canvas-using-the-plugin/downloading-the-canvas">here</a>.</td></tr><tr><td>Load Serialized Canvas</td><td><ul><li>Serialized Canvas</li><li>Undo/Redo Reset</li></ul></td><td>Load a serialized canvas JSON onto the Canvas. Setting <em>Undo/Redo Reset</em> to "yes" makes it so that the furthest a user can undo is to the point where this canvas was loaded.</td></tr><tr><td>Undo</td><td>N/A</td><td>Undo's the user's last action on the Canvas</td></tr><tr><td>Redo</td><td>N/A</td><td>Redo's the user's last action on the Canvas</td></tr><tr><td>Bring Forward an Element</td><td>N/A</td><td>Brings the selected element(s) forward in the canvas relative to the unselected element(s)</td></tr><tr><td>Send Backwards an Element</td><td>N/A</td><td>Sends the selected element(s) backwards in the canvas relative to the unselected element(s)</td></tr><tr><td>Copy Elements on Canvas</td><td>N/A</td><td>Copies the selected element(s) on the Canvas</td></tr><tr><td>Paste Elements on Canvas</td><td>N/A</td><td>Pastes any copied element(s) on the Canvas</td></tr><tr><td>Add Text to Canvas</td><td><ul><li>Text to Add</li><li>X Location</li><li>Y Location</li><li>Font Size</li><li>Text Color</li></ul></td><td>Add Text Elements to the Canvas programmatically using this action and specify the text, location, font size, and color with the action's properties.</td></tr><tr><td>Add Shape to Canvas</td><td><ul><li>Shape (Rectangle, Ellipse, Triangle)</li><li>X Location</li><li>Y Location</li><li>Height</li><li>Width</li><li>Shape Color (Fill)</li><li>Shape Color (Outline)</li><li>Outline Width</li><li>Corner Roundness</li></ul></td><td>Add Shape Elements to the Canvas programmatically using this action and specify the location, size, and color with the action's properties.</td></tr><tr><td>Add Image to Canvas</td><td><ul><li>Image (static)</li><li>Image (dynamic link) if not using static image</li><li>X Location</li><li>Y Location</li><li>Image Width</li><li>Image Height</li><li>Selectable?</li><li>Unique ID</li></ul></td><td>Add Image Elements to the Canvas programmatically using this action and specify the image, location, size with the action's properties.</td></tr><tr><td>Modify Element</td><td><p><strong>Drawing</strong></p><ul><li>Color</li><li>Stroke Width</li></ul><p><strong>Shape</strong></p><ul><li>Fill Color</li><li>Outline Color</li><li>Outline Width</li></ul><p><strong>Text</strong></p><ul><li>Font Family</li><li>Font Color</li><li>Font Size</li><li>Text Value</li></ul></td><td>Modify the selected element(s) based on their type.  For instance, if a <em>Triangle Shape</em> element is selected, you can modify the fill color, outline color, and outline width using this workflow action.</td></tr><tr><td>Scale All Elements</td><td><ul><li>Multiple (number)</li></ul></td><td>Scale all elements on the canvas (e.g. setting to 2 would double element sizes, setting to 0.5 would half the sizes)</td></tr><tr><td>Clear Canvas</td><td>N/A</td><td>Clears the Canvas of all the Elements</td></tr><tr><td>Vertically Flip Selected Element(s)</td><td>N/A</td><td>Vertically flips selected element(s) on Canvas</td></tr><tr><td>Horizontally Flip Selected Element(s)</td><td>N/A</td><td>Horizontally flips selected element(s) on Canvas</td></tr><tr><td>Remove Selected Element(s) from Canvas</td><td>N/A</td><td>Removes the selected Elements from the Canvas</td></tr><tr><td>Set Cursor Click Mode</td><td>Click Mode ("Free Draw/Paint", "Draw Shape", "Select Elements", "Add Text"</td><td>Set what happens when users click and drag on the Canvas. Note: This overrides the Element Properties (set for the Canvas on the Design Tab).</td></tr><tr><td>Toggle Selector Mode</td><td>Can select? (yes/no field)</td><td>Setting "Can select?" to "no" disables the ability for users to select Elements on the Canvas</td></tr></tbody></table>