# Two canvases on the same page + keyboard

**URL:** <https://discourse.processing.org/t/two-canvases-on-the-same-page-keyboard/16645>\
**Category:** Coding Questions\
**Created:** [December 26, 2019, 8:15pm UTC](https://discourse.processing.org/t/two-canvases-on-the-same-page-keyboard/16645 "2019-12-26T20:15:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)\
**Post date:** [December 26, 2019, 8:15pm UTC](https://discourse.processing.org/t/two-canvases-on-the-same-page-keyboard/16645/1 "2019-12-26T20:15:40Z")

</div>

Hello community,

I’m trying to have two canvases within the same HTML page, such that both canvases react to key presses. For some reason only the first canvas is reactive, and the second canvas is not.  
Here’s a minimial version of the problem:

> **[Glitch](https://glitch.com/edit/#!/mountainous-taxicab%3Fpath%3Dmany_twins.js%3A20%3A48)**
>
> Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

If there was a way to tell the browser which canvas should be reactive at a given time, this would also be okay.

Any ideas?  
Thanks,  
-Matan

---

<div class="post-metadata">

**Author:** ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)\
**Post date:** [December 26, 2019, 8:26pm UTC](https://discourse.processing.org/t/two-canvases-on-the-same-page-keyboard/16645/2 "2019-12-26T20:26:02Z")

</div>

Okay seems like this is a known thing ([https://github.com/processing/p5.js/issues/3193](https://github.com/processing/p5.js/issues/3193)). As far as I understand the solution would be to use the first sketch to declare global variables that can then be accessed from other sketches? This sounds reasonable.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 26, 2019, 8:52pm UTC](https://discourse.processing.org/t/two-canvases-on-the-same-page-keyboard/16645/3 "2019-12-26T20:52:13Z")

</div>

> [@tanzor](#):
>
> If there was a way to tell the browser which canvas should be reactive at a given time, this would also be okay.

You can place each sketch in its own `<iframe>`:  
[Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](http://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe)

Or replace p5::**keyPressed()** w/ p5.Element::**mousePressed()**:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/mousePressed)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)\
**Post date:** [December 26, 2019, 8:54pm UTC](https://discourse.processing.org/t/two-canvases-on-the-same-page-keyboard/16645/4 "2019-12-26T20:54:40Z")

</div>

the iframe solution is great! Thanks!