So i dont understand why to use instance mode. First i thought that putting “myContainer” i could add class and css position and integrate in a html page with other divs.
But recently i read about cnv.class, cnv.elt and i dont see why to use instance mode.
let cnv = createCanvas(600,400);
first of all please use </> button to format your code. Also I suggest changing the category as Processing is for Java library
What you are trying to do can be, indeed, done without instance mode. Here you can find some functions - for example, parent can set the parent div of the element (canvas) and style can directly set CSS style.
The reason why there is instance mode is that the default mode is not flexible enough to accommodate several sketches in one code. You cannot simply write two setup functions to create two sketches because the second one simply overwrites the first one. With instance mode, you can separate them in two different scopes and run as two independent sketches.
Also the default mode has a problem that it “contaminates” the global scope. You can use functions like createCanvas, background, and hundreds of them without specifying the scope at the cost of exposing everything to the global scope. This is ok as long as you use p5.js alone, but if you combine with other libraries, they may want to use the same name. Imagine, for example, another library X wants to define a function called background. Then it will be confusing if background belongs to p5.js or X. In fact, if you try to do so, p5.js will warn you like this:
p5 had problems creating the global function “background”, possibly because your code is already using that name as a variable. You may want to rename your variable to something else.
By the way, the normal or default mode is called “global mode”.