Canvas Coordinates in HTML
Coordinates
Canvas Coordinates consist of a two-dimensional grid. One of its components is the x-coordinate which increases from left to right and moves horizontally right. The other component is the y-coordinate which increases from top to bottom and moves vertically downward. The upper-left corner of the canvas has the coordinates (0,0) which is basically the starting point of the canvas element.
Drawing a Line:-
For drawing a line on the canvas, two methods are used. These are:-
- moveTo(x,y) - defines the starting point of the line.
- lineTo(x,y) - defines the ending point of the line
Drawing a Circle:-
For drawing a circle on canvas, these methods are used:-
- beginPath() - begins a path.
- arc(x,y,r,startangle,endangle) - creates an arc/curve. To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI. The x and y parameters define the x- and y-coordinates of the center of the circle. The r parameter defines the radius of the circle.
To actually draw a line or circle or many others shapes, we have to use the stoke() method at the end of them. Without it, it will not show on the screen.
Drawing a Rectangle:-
For drawing a rectangle, we have to use the following method:-
- fillRect(x1,y1,x2,y2) where x1 and y1 are initial coordinates and x2 and y2 are final coordinates.
