To see the results, you will need to use the console.
Interestingly, when
children are added to a p5 canvas or a MyCanvas, they are hidden.
| child([child]) | If there is an argument, then the child is added as a child to the MyCanvas and the MyCanvas is returned. child can be an id of HTML element, or a p5 created element (e.g. createDiv).If there is no argument, then child() returns an array of MyCanvas' children. So far I haven't seen a good reason for a canvas to have children but it works if there is. |
| elt | Underlying HTML element. All normal HTML methods can be called on this. Actually, it is the same as canvas. In the green MyCanvas, elt is used to put a red dotted border on the MyCanvas. Also another MyCanvas is set to be a child of the light blue MyCanvas which is done by taking advantage of elt. Why do this? Just to prove it works. |
| canvas | Underlying HTML element. All normal HTML methods can on this. It is the same as elt. canvas was used to change the top border to dashed. In this case, nothing is gained by adding children to a canvas because they are hidden. |
The code that created the sketches below, added several children to the pink and light blue canvas using the "same" code. Then it used the child method to obtain a list of their children. Notice the output is the same for the p5js canvas and the MyCanvas. Then just to prove it works, a new MyCanvas was added to the light blue MyCanvas as its 4th child.
The p5.js file: child.pjs
James Brink, 5/13/2020