Canvas Tutorials

Canvas Methods and Properties

Canvas Coordinates in HTML




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.

Code Explanation

All Tutorials related to Canvas Tutorials

All Sections related to Canvas