Search within TutorialsPark

HTML5 Canvas Lines


Use Canvas object to draw lines of various types.


Canvas Lines: lineTo(x,y)

The process of drawing lines on a Canvas bitmap is similar to that on a normal paper.

1.Denote the start of a new path by using method beginPath().

2.Call the drawing cursor to the starting point of the subpath using method moveTo(x,y).

3.Draw a straight line from starting point to the specified co-ordinates using method lineTo(x,y).

4.Finally,make the line visible by drawing its outline using method stroke().

Example:Draw a simple Line on Canvas.

Give it a TRY! »


Line Width: lineWidth.

1.The line in the previous example was thin,but we can define the line thickness by specifying the context's lineWidth

Eg:context.lineWidth= 7;

Example:Draw a simple Line on Canvas.

Give it a TRY! »


Line Color: strokeStyle.

1.The Default color of line using stroke()is black.However that can be altered using the strokeStyle property.

Eg: context.strokeStyle= '#fa4b2a';

Example:Canvas strokeStyle property.

Give it a TRY! »


Canvas Line Cap:lineCap .


lineCap: lineJoin:


1.The line drawn in the previous examples have a flat ends.

2.The Canvas element's specifications are designed to handle both 2D and 3D drawing context.Currently support is available for 2D context only, 3D context are in very nacent stage(eg WebGL) but will be available in the future.

Syntax: HTML5 canvas lineCap.

Example: 2D drawing Context

Give it a TRY! »



Related Examples

Related Tags