| _myMainCanvas | This name is assigned to the first MyCanvas created with createMyCanvas(...); Its purpose is show that it is possible use MyCanvas without explicitely naming it although one could have their one name for the canvas. |
| myBackground(...) | A simple function that simply passes its
parameters onto _myMainCanvas.background(...) allowing one to use MyCanvas
without specifying the name of the canvas. For example: createMyCanvas(200, 200); myBackground(255, 230, 230); myRect(20, 40, 50, 100); |
| myRect(x, y, width, height) | A simple function that simply passes its parameters onto _myMainCanvas.rect(x, y, width, height). |
One of the concepts of p5.js is that one can apply methods like background, line, and rect to a default canvas. That begs the question, "Is possible to have" a default MyCanvas?" The answers is "Yes." However as long as the p5.js has a default canvas, special names will have to be used for MyCanvas equivalents.
In order to have have multiple canvas, normally each must have a name:
can1 = createMyCanvas(200, 300);
can2 = createMyCanvas(300, 400);
The first MyCanvas is given a "hidden" name _myMainCanvas.
Then it is possible to
create simple functions like the following:
function myRect(x, y, width, height) {
_myMainCanvas.rect(x, y, width, height);
} // end myRect
Because the aim here is just to prove the concept works, only two such functions have been created. myBackground and myRect.
The sketches below were created with code:
let can, can2;
function setup() {
createMyCanvas(200, 200);
myBackground(255, 230, 230);
myRect(20, 40, 50, 100);
_myMainCanvas.rect(10, 50, 20, 80);
can = _myMainCanvas;
can.rect(100, 40, 80, 40);
myRect(120, 120, 40, 40);
can2 = createMyCanvas(250, 100);
can2.background(210);
can2.text("can2: the second MyCanvas", 5, 20);
} // setup
The italized lines illustrate that _myMainCanvas has been incorporated into MyCanvas.pjs and it can be used like any other variable although one would rarely do so.
The p5.js file: myMainTest.pjs
James Brink, 5/13/2020