Toggle-able Views with 2 Canvases that Push to Static Canvases
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a canvas that copies itself to several static canvases and I am looking to add front and back functionality as accomplished here, kudos @ Kostasx for that previous help. In other words, I'd like to have 2 canvas views that display previews of each side by sending canvases 1 and 2 to the static canvases, and them be toggleable.

Here is a Stack Overflow answer that I'm working from. I tried sharing a JSFiddle but it didn't want to work for me, for some reason.

It'd be a plus if each canvas (front and back) worked with the first link's functions; having mainCanvas/the active canvas work with my current functions would be great.

Please let me know if I can answer any questions that'll help you provide a solution. Thank you!

So, you want a button that makes canvas 1 and 2 static by copying them?
enderdba 3 months ago
Hi, yes—I'd like it to look like the first link but with the functionality of the second; so front and back views. You'd start with canvas1, for example, and the static canvases would be copies of this. If you change views to canvas 2, you'd see the static canvases change to that view. Please let me know if that makes more sense, thanks
sharper 3 months ago
awarded to Wuddrum

Crowdsource coding tasks.

2 Solutions


Let me know if this is what you need:
https://codepen.io/kostasx/pen/dKeNGN?editors=0010

Hey kostasx; that is a really cool script but wasn't quite what I was going for; thanks for taking the time though!
sharper 3 months ago
Winning solution

Assuming I understood the problem correctly, here's my solution: Codepen.io

Front and back previews are static canvas' that reflect everything that happens on the main canvas (for front and back respectively). The visibility of the can be toggled separately.

I've based my solution on the provided codepen.

EDIT: You can remove canvas' event subscriptions for object:scaling and object:moving if you don't need to continuously update the previews. Meaning that their scaling and position would be updated only when the moving/scaling is done on the main canvas. This would also increase performance on weaker systems.

To remove the event subscribers, remove the following lines:

canvas1.on('object:scaling',  option => onCanvasModified(option, previewCanvas1));
canvas1.on('object:moving',  option => onCanvasModified(option, previewCanvas1));
...
canvas2.on('object:scaling',  option => onCanvasModified(option, previewCanvas2));
canvas2.on('object:moving',  option => onCanvasModified(option, previewCanvas2));

EDIT2: Here's an updated solution Codepen.io

A variable amount of static canvases can now be added. All static canvases now mirror the currently selected side.

If this is still not what you're asking for then you should maybe explain what you plan to use this for so the picture is more clear.

Hi, thanks but I think I did a bad job of explaining what I'm after. I have elaborated some in a comment above- copy and pasting: I'd like it to look like the first link but with the functionality of the second; so front and back views. You'd start with canvas1, for example, and the static canvases would be copies of this. If you change views to canvas 2, you'd see the static canvases change to that view. Please let me know if that makes more sense, thanks
sharper 3 months ago
This looks like what I'm after! Thank you.
sharper 3 months ago
Hey Wuddrum, the script's great. How might I be able to split the preview static canvases so that it's 4 x 2, like in this image? I'm after this because I'm looking to print on 4 x 2 perforated paper. I've been trying to style it but am not having any luck
sharper 3 months ago
Are you familiar with any CSS grid frameworks? Here's an implementation with Bootstrap's grid system: Codepen.io. Now all the preview canvases will always max out at 4 per line. You just need to set the desired width and height of the canvases.
Wuddrum 3 months ago
This looks great. Thank you again!
sharper 3 months ago
Hey again @Wuddrum, I was wondering if you could confirm something. If I want to print/save both sides of the preview simultaneously, would it be possible for me to wrap them in a div and/or another canvas (I guess 8 canvases per 2 separate canvases, for example. if that makes sense)? I'm looking now to save and print the previews, as opposed to just the original canvases and am not sure how I should go about this.
sharper 3 months ago
Hi, assuming that canvas1 and canvas2 are front and back, you'd need to adjust the save/print methods to get data urls from them, instead of mainCanvas. And then form them in whatever layout for printing or directly saving.
Wuddrum 3 months ago
Thank you. I think I follow. I appreciate it. I'm asking a new question here in Bountify.
sharper 3 months ago
View Timeline