Two canvases on the same page + keyboard

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:

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

Okay seems like this is a known thing (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.

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

Or replace p5::keyPressed() w/ p5.Element::mousePressed():
p5js.org/reference/#/p5.Element/mousePressed

2 Likes

the iframe solution is great! Thanks!