How to Render a Single p5.js Sketch to Multiple Divs

Question

I am trying to use a single p5 sketch in multiple divs.

Currently using below code below. I have tried using a class selector but it seems to only work with a parent method(doesn't work with getElementById for example.) As another workaround, I could not make this p5 sketch the background element in the body selector either. Thanks for the help!

let theShader;

function preload() {
  theShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
  pixelDensity(1);
  let myCanvas = createCanvas(windowWidth, windowHeight, WEBGL);
  myCanvas.parent('container1');
}

function draw() {
  shader(theShader);
  theShader.setUniform("u_resolution", [width, height]);
  theShader.setUniform("u_time", millis() / 1000.0);
  theShader.setUniform("u_mouse", [mouseX, map(mouseY, 0, height, height, 0)]);
  rect(0.0, 0.0, 1.0, 1.0);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Answer 1

Not sure if it works like that. But you could try to create a canvas element instead of a div element. At the end of the day, a p5 sketch is also a canvas element.

And then you should be able to grab the new canvas:

let newCanvasCtx = newCanvas.getContext('2d');

and then call drawImage and pass in the p5 canvas:

newCanvasCtx.drawImage(p5Canvas, 0, 0);