Skip to content
earlygrey edited this page Sep 23, 2019 · 6 revisions

Lines

Simple lines are drawn using the line() family of methods.

This is pretty self explanatory - draws a line between two points. You can specify the line thickness, as well as whether the endpoints are snapped to the centre of screen pixels.

Paths

These are drawn using the path() family of methods.

This draws lines between successive points of the path provided. You can specify the line thickness, the join type, and whether the path is open (whether the first and last points are connected).

Polygons

These are drawn using the polygon() and filledPolygon() families of methods.

You can draw a regular polygon, specifying the number of sides, the scale along the x- and y- axes and the rotation after scaling, and if drawing using lines, line width and join type.

You can also draw an arbitrary polygon by passing in a Polygon object.

Circles and Ellipses

These are drawn using the circle(), ellipse(), filledCircle() and filledEllipse() families of methods.

These are drawn by drawing a regular polygon with lots of sides so that it looks smooth. The number of sides required is estimated based on the size of the ellipse and its eccentricity. You can specify the half- width and height, the rotation and the line width. A circle is drawn as an ellipse with the same width and height.

Arcs and Sectors

These are drawn using the arc() and sector() families of methods.

These are drawn as circles are, but only the part of the circle that subtends the angle you provide. This starts as with circle() by drawing a many-sided polygon, but only the sides that fit completely within the arc are actually drawn, then an extra bit is added to the start and end to reach the exact angle provided.

Because this is a little tricky, when drawing an arc the only join options are pointy or none.

Rectangles

These are drawn using the rectangle() and filledRectangle()families of methods.

You can specify the width, height, and rotation, and if drawing using lines, line width and join type.