The canvases are below this table
| style(property, [value]) | Sets the given style (css) property (1st arg) of the element with the given value (2nd arg). If a single argument is given, .style() returns the value of the given property; however, if the single argument is given in css syntax ('text-align:center'), .style() sets the css appropriately. (quoted from p5 reference.) But note that not all CSS commands work. |
| html([html], [append]) | If an argument is given, sets the inner HTML of the element, replacing any existing html. If true is included as a second argument, html is appended instead of replacing existing html. If no arguments are given, returns the inner HTML of the element. (Quoted from p5 reference.) It works but I am not sure what it is good for. |
| center([align]) | Centers a p5 Element either vertically, horizontally, or both, relative to its parent or according to the body if the Element has no parent. If no argument is passed the Element is aligned both vertically and horizontally. (Quoted from p5 reference.) Align can be "vertical" or "horizontal". |
| position([x], [y], [positionType]) | Sets the position of the element. If no position type argument is given, the position will be relative to (0, 0) of the window. Essentially, this sets position:absolute and left and top properties of style. If an optional third argument specifying position type is given, the x and y coordinates will be interpreted based on the positioning scheme. If no arguments given, the function returns the x and y position of the element. (Quoted from p5 reference.) positionType is a string which can be static, fixed, relative, sticky, initial or inherit. If there are not arguments, the location is returned as an object with x and y components. |
| hide() | Hides the canvas by setting the style "display: none". |
| show() show(inline)* | If show is used without an argument, the style "display: block" is applied as specified in the p5 documentation. However, p5 canvas and MyCanvases originally created with display: inline so MyCanvas allows show(true). When this is done, then the style display: inline is used. You can see the difference when using the two show buttons. |
| resizeCanvas(w, h, [noRedraw]) | Resizes the canvas to w by h. If the optional argument is true, then the canvas is not redrawn using the draw function. Otherwise the canvas is automatically redrawn. |
* This not a p5 option.
can.style('aaa'); // can is a MyCanvas
p5can.style('aaa'); // p5can is a p5 Canvas
are issued.
A little surprise here. This web page has a CSS style that says that all canvases should have a green border. Unfortunately the MyCanvas is not recognized as a canvas.
The p5.js file: moreTests.pjs
James Brink, 5/23/2020