Key:
Many of the global methods had to be added to CanvasClass. For example, in the normal p5, rectMode is global which is fine when there is only one canvas. But in a multi-canvas page, each canvas needs to have its own rectMode.
Surprisingly, very few of the "_xxxxxxx" elements had to be implimented.
| element | Implemented in p5 canvas | Implemented in CanvasClass |
|---|---|---|
| strings | ||
| _textFont | x | |
| _textStyle | x | |
| _textAlign | x | |
| _textBaseline | x | |
| _rectMode | x | |
| _ellipseMode | x | |
| _colorMode | g | |
| _imageMode | x | x |
| _cachedStrokeStyle | x | |
| _cachedFillStyle | x | |
| _cachedBlendMode | x | |
| _id | ||
| numbers | ||
| width | x | x |
| height | x | x |
| _textSize | x | |
| _textLeading | x | |
| _curveTightness | x | |
| _strokeWeight | ||
| _textWeight | ||
| _textStrokeWeight | ||
| mouseX | g | x (when mouse over canvas) |
| mouseY | g | x (when mouse over canvas) |
| pmouseX | g | x (when mouse over canvas) |
| pmouseY | g | x (when mouse over canvas) |
| winMouseX | g | x (same as p5 winmouseX over canvas when the mouse is over the canvas. ) |
| winMouseY | g | x (same as p5 winmouseY over canvas when the mouse is over the canvas. ) |
| pwinMouseX | g | x (when mouse over canvas. It appears the p5 pwinMouseX gets updated more frequently that CanvasClass pwinMouseX) |
| pwinMouseY | g | x (when mouse over canvas. It appears the p5 pwinMouseY gets updated more frequently that CanvasClass pwinMouseY) |
| movedX | g | x (when mouse over canvas) |
| movedY | g | x (when mouse over canvas) |
| functions | ||
| _applyDefaults | x | |
| resizeCanvas | x | x |
| background | x | x |
| clear | x | x |
| fill | x | x |
| stroke | x | x |
| erase | x | x |
| noErase | x | x |
| image | x | x |
| _getTintedImageCanvas | x | |
| blendMode | x | x |
| blend | x | x |
| _getPixel | x | |
| loadPixels | x | x |
| set | x | x |
| updatePixels | x | x |
| _acuteArcToBezier | x | |
| arc | x | x |
| ellipse | x | x |
| line | x | x |
| point | x | x |
| quad | x | x |
| rect | x | x |
| triangle | x | x |
| endShape | x | x |
| strokeCap | x | x |
| strokeJoin | x | x |
| strokeWeight | x | x |
| _getFill | x | |
| _setFill | x | |
| _getStroke | x | |
| _setStroke | x | |
| bezier | x | x |
| curve | x | x |
| _doFillStrokeClose | x | |
| applyMatrix | x | x P5 canvases apply resetMatrix() every time a new frame is drawn.When needed, add resetMatrix() at the beginning of draw(). |
| resetMatrix | x | x |
| rotate | x | x (See applyMatrix). |
| scale | x | x (See applyMatrix). |
| translate | x | x (See applyMatrix). |
| text | x | x |
| _renderText | x | |
| textWidth | x | x |
| _applyTextProperties | x | |
| push | x | x |
| pop | x | x |
| get | x | x The two argument version seems to work correctly. But the no argument and 4 argument versions have problems. First, it is not really known how they should work because there are no examples. Second, the image they produce may be "obsolete" not the final one. |
| textLeading | x | x |
| textSize | x | x |
| textStyle | x | x |
| textAscent | x | x |
| textDescent | x | x |
| textAlign | x | x |
| _isOpenType | x | |
| _updateTextMetrics | x | |
| parent | x | x |
| id | x | x |
| class | x | x |
| mousePressed | x | x |
| doubleClicked | x | x |
| mouseWheel | x | x |
| mouseReleased | x | x |
| mouseClicked | x | x |
| mouseMoved | x | x |
| mouseOver | x | x |
| mouseOut | x | x |
| touchStarted | x | x |
| touchMoved | x | x |
| touchEnded | x | x |
| dragOver | x | x |
| dragLeave | x | x |
| _setProperty | x | |
| changed | x | (Apppears to be useless for canvases.) |
| input | x | (Apppears to be useless for canvases.) |
| addClass | x | x |
| removeClass | x | x |
| hasClass | x | x |
| toggleClass | x | x |
| child | x | x |
| center | x | x Works well if parent is a div. May be a little off if no parent. |
| html | x | x |
| position | x | x |
| _translate | x | |
| _rotate | x | |
| style | x | x |
| attribute | x | x |
| removeAttribute | x | x |
| value | x | (Apppears to be useless for canvases.) |
| show | x | x Has an optional extra parameter: show(true) displays inline |
| hide | x | x |
| size | x | x No arguments: returns size. Arguments seem useless. |
| remove | x | x |
| drop | x | x |
| color | g | x |
| colorMode | g | x |
| loadImage | g | x |
| noFill | g | x |
| noStroke | g | x |
| rectMode | g | x |
| ellipseMode | g | x |
| textFont | g | x |
| square | g | x |
| circle | g | x |
| bezierPoint | g | x |
| bezierTangent | g | x |
| _decrementPreload | g | |
| beginShape | g | x |
| vertex | g | x |
| keyDown | x An event listener like mousePressed | |
| keyUp | x An event listener like moiseReleased | |
| blue | g | x |
| green | g | x |
| red | g | x |
| brightness | g | x |
| hue | g | x |
| saturation | g | x |
| lerp | g | x |
| smooth | g | x |
| noSmooth | g | x |
| beginContour | g | x |
| endContour | g | x |
| curveVertex | g | x |
| bezierVertex | g | x |
| bezierDetail | g | x |
| curveDetail | g | x |
| curveTightness | g | x |
| curvePoint | g | x |
| curveTangent | g | x |
| loadFont | g | x |
| normalMaterial | g | x |
| emissiveMaterial | g | x |
| box | g | x Works but problems with "in-motion" rotations. |
| sphere | g | x Works but problems with "in-motion" rotations. |
| cone | g | x Works but problems with "in-motion" rotations. |
| cylinder | g | x Works but problems with "in-motion" rotations. |
| torus | g | x Works but problems with "in-motion" rotations. |
| plane | g | x Works but problems with "in-motion" rotations. |
| rotateX | g | x Works in setup() but problems with "in-motion" rotations. |
| rotateY | g | x Works in setup() but problems with "in-motion" rotations. |
| rotateZ | g | x Works in setup() but problems with "in-motion" rotations. |
| ambientMaterial | g | x (not tested "in-motion") |
| specularMaterial | g | x (not tested "in-motion") |
| emissiveMaterial | g | x (not tested "in-motion") |
| ambientLight | g | x (only tested with 1 and 3 arguments) |
| pointLight | g | x (only tested with 6 arguments") |
| specularColor | g | x (only tested with 3 arguments) |
| shininess | g | x |
| shearX | g | x |
| shearY | g | x |
| imageMode | g | x |
| save | g | (Use saveCanvas instead) |
| saveCanvas | g | x |
| pixelDensity | g | x |
| objects | ||
| elt | x | x |
| _pixelsState | x | |
| _pInst | x | x |
| _events | x | x |
| canvas | x | x |
| _textAscent | x (null) | |
| _textDescent | x (null) | |
| _tint | x (null) | |
| drawingContext | x | |
| _backgoundColor | ||
| _fillColor | ||
| _strokeColor | ||
| touches | g | x |
| _colorMaxes | g | |
| renderer | x | |
| boolean | ||
| _isMainCanvas | x | |
| _doStroke | x | |
| _doFill | x | |
| _strokeSet | x | |
| _fillSet | x | |
| _dragDisabled | x | |
| mouseIsPressed | g | x |
| keyIsPressed | g | x if keyDown() and keyUp() are declared |
| isOver | x True if the mouse is over the canvas. | |
| _strokeText | ||
| _dragStarted | ||
| Extras not part of the class | ||
| globalMouse | If one wants to be able to follow the mouse even when it is outside of the canvas. Set globalMouse equal to the canvas name and use gMouseX and gMouseY. This works for only one canvas at a time. | |
James Brink, 7/23/2020