Drawing rectangles and arcs and adding text
Here are some of the other canvas methods available for use:
| Name | Description |
|---|---|
.rect(x, y, w, h) |
creates a rectangle of width w and height h with the top left corner at (x, y) |
.arc(x, y, r, s, e) |
creates an arc of a circle centred at (x, y) with radius r from starting angle s to ending angle e, in radians |
.fillText(text, x, y) |
places text at (x, y) |
A circle can be made by using a starting angle of 0 and an ending angle of
2 * Math.PI. The method .stroke() is used to make it appear. The default direction of an arc is clockwise.
context.arc(200, 200, 40, 0, 2 * Math.PI);
context.fill()
context.stroke();