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 5 months 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 5 months 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 5 months 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