The above canvas demonstrates MyCanvas shapes.
| line(x1, y1, x2, y2) | The red lines in the upper left corner, also the red and purple horizontal lines having various stroke weights. |
| strokeWeight(weight) | Sets the width of lines in pixels. The red lines in the upper left corner have strokeWeights of 1, 4, and 7. The green lines have strokeWeights of 10. This also applies to all cases where strokes are used. |
| strokeCap(cap) | Set the style for the end of lines. The green parallel lines illustrate the three options. Top line: SQUARE, middle line: PROJECT, bottom line: ROUND - the default. This also applies to all cases where strokes are used. |
| ellipse(x, y, w, h) ellipse(x, y, d) | The blue circles in top middle having increasing alpha (opaqueness) values. The right most was drawn with noStroke(). |
| ellipseMode(mode) | Mode can be CORNER, CENTER (the default), RADIUS, or CORNERS. Applies to ellipse(), circle(), and arc(). The options were used on the right hand ellipses. The CORNERS mode is normally inappropriate for circle() and 3 parameter ellipses. |
| arc(x, y, w, h, start, stop, [mode]) | mode can be OPEN (the default), CHORD, or PIE. start = 0 is the positive x axis and angles increase in the clockwise direction. The 6 figures with in the bottom right corner are arcs. The one with a red border is OPEN, one with a navy border is CHORD, while ones with orange borders and the one with no border are PIE. |
| rect(x, y, w, h) rect(x, y, s) | The aqua rectangles on middle having increasing alpha (opaqueness) values. The right most was drawn with noStroke(). |
| rectMode(mode) | Mode can be CORNER (the default), CENTER, RADIUS, or CORNERS. Applies to rect() and square(). The options were used for the right hand white and pink squares. The CORNERS mode is normally inappropriate for square(). |
| triangle(x1,y1, x2,y2, x3,y3) | The triangles on the left. The upper one was drawn with noStroke() and lower one with noFill(). |
| quad(x1,y1, x2,y2, x3,y3, x4,y4) | The quadrilaterals in the middle. The first two were drawn with noFill(). The last one was drawn with noStroke(). |
| point(x, y) | The points on the right above the circles. The first row has strokeWeight(1), the last with strokeWeight(5). (Points do not use fill.) |
| square(x, y, s) | The overlapping square in the lower left. The larger one was drawn with noStroke and 50% opaqueness. Uses the rectMode. |
| circle(x, y, s) | The overlapping circles near the lower left corner. The smaller circle had noStroke(). The larger one was drawn 50% opaqueness. Uses the ellipseMode. |
This canvas also used the following MyCanvas function and methods:
createMyCanvas, parent, background, stroke, strokeWeight,
noStroke, fill, and noFill.
This canvas demonstrates MyCanvas text.
| text(str, x, y) | Used often. |
| textSize(size) | "size' uses "px" units |
| textFont(font) textFont(font, size) | The fonts illustrated are fonts that are generally available on most computers. For example, see https://www.hostinger.com/tutorials/best-html-web-fonts. The family fonts allow the browser to pick any available font with the given type. (Very safe.) You can specify your own font but beware that it might not be on your user's computer so you may need to include the font with your application. |
| textStyle(style) | As in p5js, acceptable styles are NORMAL, BOLD, ITALIC, and BOLDITALIC. Anything else defaults to NORMAL. |
| textAlign(horizAlign) | As in p5js, acceptable horizAlign values are LEFT, CENTER, and RIGHT. LEFT means you are aligning the left edge of your text to the x value you give in text(). |
This canvas also used the following MyCanvas function and methods:
createMyCanvas, parent, background, line, stroke, strokeWeight,
noStroke, fill, and noFill.
p5.js does some unusual default things concerning stroke and text. It appears that p5.js does not stroke text until the first time stroke is used to set stroke color. MyCanvas attempts to mimic behavior that although I am not sure that I understand the p5.js policy completely.
Left: a p5.js canvas. Right: a MyCanvas canvas. In both cases, fill(...) is not used and the text indicates the first time that strokeWeight(...) and stroke(...) were used.
The p5.js file: testShapeText.pjs
James Brink,5/12/2020