As mentioned in the previous chapter, the first two values of a canvas method (the first dimension) are the coordinates.

In this chapter we will show how to use canvas coordinates to draw a simple line.

Drawing a line

Following methods may be used to draw a straight line in canvas:

  • moveTo(x,y) - defines the starting point of the line
  • lineTo(x,y) - defines the ending point of the line
  • stroke() - strokes the sub paths with the current stroke style.

Example

Example of how to draw a straight line with canvas element:

 

›› go to examples ››