I’ve been searching for this answer for longer than I care to admit, and after many google searches and many hours of skipping around The Coding Train’s innumerous videos I’ve felt close but have yet to find the answer.
Goal:
I want a canvas to output in two locations. Once on the canvas itself, and again on a secondary canvas in an adjacent element. I can’t just use a larger canvas, as I’ll be doing this with several canvases on this single page using namespacing – I’ll end with 5 unique/primary canvases and a duplicate/secondary canvas of each of those canvases.
The part I’m getting hung up on is exporting the state of the primary canvas and importing it in the secondary canvas.
Daniel has a video where he does exactly this with websockets(Shared Canvas), but I need it to happen locally on the same page.
I’ve tried various attempts at using set()/get(), saveFrames(), using local storage with storeItem()/getItem(), and more. I’ve been close, and have managed mirror the state of a canvas at a different location on the same canvas, but not a separate canvas.
Thanks for any time and thought put into helping me solve this problem.