P5.js: Drawing elements in a manually created HTML canvas object?

[vennsoh]

Is that possible to create my canvas area.

HTML:
<canvas id="canvas"></canvas>

and then within my setup I could target the created HTML canvas and draw it there.

function setup() {
    ellipse(50, 50, 50, 50);
}

I am looking at this particular way of setup because I am integrating p5.js along with other javascript libraries such as Framer.js I need a way to add the p5.js code to the framer canvas area.

Or maybe I can create a div element in HTML and contain all my p5 generated canvas layers into that div? Will that be better?

[lmccart]

You can't set a particular canvas element directly since p5.js operates on a page level, but you can set a parent container for the canvas. So you could manually create a div and attach the canvas you create with p5 to that.
http://p5js.org/reference/#p5.Element/parent

[lmccart]

alternatively, if you use instance mode, you can choose a container div for all elements created by p5 to attach to: https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace

[vennsoh]

Super helpful! Thanks a ton. @lmccart

[raghavendrajain]

Hi @lmccart I could not understand well. I will explain my situation.
I want to create 3D shape on my canvas, but I am using ml5.js and posenet example.
There are two ways I could think of:

Approach 1: Using WEBGL renderer. But, it does not work. WEBGL renderer is required to make 3d shapes run, right? The following is NOT working when I use it with ml5.js example:
createCanvas(640,480, WEBGL)

Approach 2: Use a different library. I decided to use babylon.js

But it requires that I create a canvas element first and then do the diplay.

<canvas id="renderCanvas" touch-action="none"></canvas> 
var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
var engine = new BABYLON.Engine(defaultCanvas0, true); // Generate the BABYLON 3D engine
//  Add the create scene function 

Problem: The canvas created by p5 is different from that of the babylon.js. I want the display to be one and not two separate windows. How to do that? Thank you!

[limzykenneth]

@raghavendrajain You can create the p5 canvas first then pass that canvas element to the library you want to use.

var canvas;
function setup(){
  canvas = createCanvas(640, 480, WEBGL);
}

var engine = new BABYLON.Engine(canvas.elt, true);

If you have further questions, please post them on the forum.