The HTML canvas is two-dimensional.
The upper-left corner of the canvas has the coordinates (0,0)
In the previous chapter, you saw this method used: fillRect(0,0,150,75).
This means: Start at the upper-left corner (0,0) and draw a 150 x 75 pixels rectangle.
Coordinates Example (200px x 100px):
Mouse over this (200 x 100 pixels) rectangle to see its x and y coordinates:
To draw a straight line on a canvas, you use these methods:
To actually draw the line, you must use one of the "ink" methods, like stroke(). |
Define a starting point in position (0,0), and an ending point in position (200,100).
Then use the stroke() method to actually draw the line:
To draw a circle on a canvas, you use the following methods:
Create a circle with the arc() method.
Then use the stroke() method to actually draw the line.