| Save (as PNG to URL) | - Image Height (px)
- Image Width (px)
- PNG File Name
| Use this workflow action to save a .png image of your canvas to your database. Full instructions here. |
| Save (as Serialization) | N/A | 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 here. |
| Download Canvas (sets link to download) | HTML id Attribute, Name of file | Due to some Bubble and JavaScript limitations, you'll need to add a link to your Bubble page and closely follow the instructions here. |
| Load Serialized Canvas | - Serialized Canvas
- Undo/Redo Reset
| Load a serialized canvas JSON onto the Canvas. Setting Undo/Redo Reset to "yes" makes it so that the furthest a user can undo is to the point where this canvas was loaded. |
| Undo | N/A | Undo's the user's last action on the Canvas |
| Redo | N/A | Redo's the user's last action on the Canvas |
| Bring Forward an Element | N/A | Brings the selected element(s) forward in the canvas relative to the unselected element(s) |
| Send Backwards an Element | N/A | Sends the selected element(s) backwards in the canvas relative to the unselected element(s) |
| Copy Elements on Canvas | N/A | Copies the selected element(s) on the Canvas |
| Paste Elements on Canvas | N/A | Pastes any copied element(s) on the Canvas |
| Add Text to Canvas | - Text to Add
- X Location
- Y Location
- Font Size
- Text Color
| Add Text Elements to the Canvas programmatically using this action and specify the text, location, font size, and color with the action's properties. |
| Add Shape to Canvas | - Shape (Rectangle, Ellipse, Triangle)
- X Location
- Y Location
- Height
- Width
- Shape Color (Fill)
- Shape Color (Outline)
- Outline Width
- Corner Roundness
| Add Shape Elements to the Canvas programmatically using this action and specify the location, size, and color with the action's properties. |
| Add Image to Canvas | - Image (static)
- Image (dynamic link) if not using static image
- X Location
- Y Location
- Image Width
- Image Height
- Selectable?
- Unique ID
| Add Image Elements to the Canvas programmatically using this action and specify the image, location, size with the action's properties. |
| Modify Element | Drawing Shape - Fill Color
- Outline Color
- Outline Width
Text - Font Family
- Font Color
- Font Size
- Text Value
| Modify the selected element(s) based on their type. For instance, if a Triangle Shape element is selected, you can modify the fill color, outline color, and outline width using this workflow action. |
| Scale All Elements | | Scale all elements on the canvas (e.g. setting to 2 would double element sizes, setting to 0.5 would half the sizes) |
| Clear Canvas | N/A | Clears the Canvas of all the Elements |
| Vertically Flip Selected Element(s) | N/A | Vertically flips selected element(s) on Canvas |
| Horizontally Flip Selected Element(s) | N/A | Horizontally flips selected element(s) on Canvas |
| Remove Selected Element(s) from Canvas | N/A | Removes the selected Elements from the Canvas |
| Set Cursor Click Mode | Click Mode ("Free Draw/Paint", "Draw Shape", "Select Elements", "Add Text" | 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). |
| Toggle Selector Mode | Can select? (yes/no field) | Setting "Can select?" to "no" disables the ability for users to select Elements on the Canvas |
3. Add a [HTML id attribute](/useful-tips/element-html-id-attribute) to that group
4. Enter that HTML id attribute in "Group HTML id" property on the Canvas element\
5. Adjust the X and Y offsets (optional)
6. Within the the group, you can add workflow actions to elements. For instance, when a user clicks the "X", we've set it up so that it deletes the element from the Canvas
# Responsiveness
#### **I saved a serialized Canvas on Desktop and need to re-open it on Mobile (or vice versa, for responsiveness). How do I make the elements inside smaller?**
You can scale your elements larger or smaller by using the "Scale All Elements" workflow action:
This workflow action is helpful if you need to make your Canvas responsive when serializing it and saving it to the database. Here are the steps you should follow:
1. When serializing the Canvas, save the Canvas Width in another field associated with that database Thing:\
2. When loading the Canvas on a new screen size, load the Serialized Canvas from step #1, then use the "Scale All Elements" workflow action to update the size of the Elements in your Canvas based on the current Canvas width (formula is **Current Canvas Width** ÷ **Canvas Width when Serialized**):\
# Element HTML id Attribute
In order to enable "Download Canvas", you'll need to add an HTML ID Attribute to a standard Bubble link element. Here are the instructions to do so:
1. Navigate to your app's "Settings" tab
2. Click the "General" Section
3. Check the box for "Expose the option to add an ID attribute to HTML elements" (see screenshot below)\
4. On the design tab, add a Bubble link element to a page
5. Scroll to the bottom of the Link's element inspector and enter a unique ID attribute (see screenshot below)\
6. This will be the HTML ID Attribute for the link element you've added to your page!