Duplicating a canvas and its state

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.

Were you able to resolve this?

I’m still trying to understand that this is – do you mean a literal duplicate of the output, like rendering a graphics buffer on one part of the screen as a sketch and then copying the exact same pixels to another part of the screen – or is this like 5 maps sketches and then 5 detail regions from those maps?

Isn’t it

PImage img = get();

and then

image ( img, 0,0 );

I think this is a p5.js question – so p5.Image

1 Like