Saving and Loading Canvases to and from a File Simultaneously
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I've been experimenting with saving and loading to and from a JSON file with fabricjs.com.

What I want to do is be able to save and load 2 canvases at the same time. So far I have only been able to save 2 canvases to 2 separate files at the same time, and load them separately.

I'd like to be able to save the 2 canvases as 1 file to my computer and then load from the said file later to the two separate canvases, to make it easier when I want to start from a saved "template" (the JSON).

Please see my current working example to see what I mean. In this example, I have a second canvas, but it's not doing anything yet; I just initiated it top get started.

Please let me know if I can add anything that'd help you produce a solution. Cheers!

I'll add that I admit there may be easier ways to accomplish this; I'm all ears for other working solutions (I'm not married to the JSON text file format if you have another idea). Thanks.

Can you please provide a JSON for example?
enderdba 22 days ago
@enderdba If in the example you select Create + Save JSON as File it will create an example of the JSON that I'd like to create and restore for both canvases. Is that what you mean?
sharper 22 days ago
awarded to enderdba

Crowdsource coding tasks.

2 Solutions

Winning solution

Check this code https://jsfiddle.net/enderdba/u5768u89/1/

The trick about JSON saving is that you can save multiple variables inside a same object, so it can be easily done by saving a canvas JSON to a variable and then add it to the object. This can be done multiple times with the same object as you like.

What i did was creating an object and then appended the 2 JSON Outputs from both canvas as objects, c1 and c2, so after saving i can read it again using the same objects after parsing the data from the txt

@enderdba This looks great. I'll check it out when I'm back in front of my computer in a little bit. Thanks! @jduplessis294 Oh no! I appreciate the help, though. Haha
sharper 22 days ago

Here's my solution:
https://jsfiddle.net/phvrm64o/2/

It appends both canvas JSON into one JSON file and splits it back up when it loads that file.

View Timeline