# Duplicating a canvas and its state

**URL:** <https://discourse.processing.org/t/duplicating-a-canvas-and-its-state/12902>\
**Category:** Coding Questions\
**Created:** [July 22, 2019, 11:44pm UTC](https://discourse.processing.org/t/duplicating-a-canvas-and-its-state/12902 "2019-07-22T23:44:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hoticewater](https://avatars.discourse-cdn.com/v4/letter/h/d78d45/32.png) [@hoticewater](https://discourse.processing.org/u/hoticewater)\
**Post date:** [July 22, 2019, 11:44pm UTC](https://discourse.processing.org/t/duplicating-a-canvas-and-its-state/12902/1 "2019-07-22T23:44:43Z")

</div>

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](https://www.youtube.com/watch?v=i6eP1Lw4gZk)), 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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 27, 2019, 4:04pm UTC](https://discourse.processing.org/t/duplicating-a-canvas-and-its-state/12902/2 "2019-07-27T16:04:30Z")

</div>

> [@hoticewater](#):
>
> 5 unique/primary canvases and a duplicate/secondary canvas of each of those canvases.

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 27, 2019, 11:02pm UTC](https://discourse.processing.org/t/duplicating-a-canvas-and-its-state/12902/3 "2019-07-27T23:02:43Z")

</div>

> [@hoticewater](#):
>
> tried various attempts at using set()/get(), saveFrames(), using local storage with storeItem()/getItem(),

Isn’t it

PImage img = get();

and then

image ( img, 0,0 );

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 28, 2019, 12:47am UTC](https://discourse.processing.org/t/duplicating-a-canvas-and-its-state/12902/4 "2019-07-28T00:47:02Z")

</div>

> [@Chrisir](#):
>
> Isn’t it  
> PImage img = get();

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