Saving the Canvas

You enable users to save the canvas in two ways:

1. Save (as PNG to URL): this creates a PNG image from the Canvas and uploads it to your app's AWS instance so that you have a URL of the image that you can save to your database.

2. Save (as Serialization): this is helpful if you want to enable your users to save their progress and, in a later session, reload their Canvas to continue editing (i.e. this option creates a JSON text of your Canvas that you can reload later)

Below are instructions for each save method. For a live example, here is a link to an example implementation of each type of saving.

Save (as PNG to URL)

Saving the Canvas as a .png requires the following steps:

1. On your Design tab, you'll most likely want some kind of button like "Save Canvas as PNG"

2. Initiate the workflow action called Save (as PNG to URL) Canvas-Main A when a user clicks that button

3. Add a the workflow event called A Canvas - Main has generated a saved image URL. This workflow event fires when the .png image of the Canvas has been generated

4. To save your image to the database, add a workflow action to create/edit the database Thing you'd like to use. In the example below, we create a new database Thing called Canvas - Saved Image Documentation. For the image field, we refer to a Canvas built-in state called "Drawing's PNG URL":

5. Voila! Your Canvas .png file should now be saved to the database. You can refer to the image on the page or use it like you would use any other image in Bubble.

For a live example, see this editor-mode and run-mode example link.

Save (as Serialization)

1. On your Design tab, you'll most likely want to add some kind of button like "Save as Serialization"

2. Add the workflow action called Save (as Serialization) Canvas-Main A when a user clicks that button

3. Add a the workflow event called A Canvas - Main has generated a serialization. This workflow event fires when the serialization JSON of the Canvas has been generated

4. To save your Canvas serialization to the database, add a workflow action to create/edit the database Thing you'd like to use. In the example below, we create a new database Thing called Canvas - Saved Image Documentation. For the image field, we refer to a Canvas built-in state called "Serialized Canvas":

5. To reload a serialized Canvas, you can add a button on your page and use the Load Serialized Canvas a Canvas - Main workflow action:

6. Refer to the text field of the Serialized Canvas in the Serialization property:

For a live example, see this editor-mode and run-mode example link.