- HTML Canvas Tutorial
- HTML Canvas - Home
- HTML Canvas - Introduction
- Environmental Setup
- HTML Canvas - First Application
- HTML Canvas - Drawing 2D Shapes
- HTML Canvas - Path Elements
- 2D Shapes Using Path Elements
- HTML Canvas - Colors
- HTML Canvas - Adding Styles
- HTML Canvas - Adding Text
- HTML Canvas - Adding Images
- HTML Canvas - Canvas Clock
- HTML Canvas - Transformations
- Composting and Clipping
- HTML Canvas - Basic Animations
- Advanced Animations
- HTML Canvas API Functions
- HTML Canvas - Element
- HTML Canvas - Rectangles
- HTML Canvas - Lines
- HTML Canvas - Paths
- HTML Canvas - Text
- HTML Canvas - Colors and Styles
- HTML Canvas - Images
- HTML Canvas - Shadows and Transformations
- HTML Canvas Useful Resources
- HTML Canvas - Quick Guide
- HTML Canvas - Useful Resources
- HTML Canvas - Discussion
HTML Canvas - Lines
Line is a simple figure formed by a set of points which are extended in opposite direction towards one another until they meet.
The interface CanvasRenderringContext2D contains properties and methods to draw lines onto the canvas element using the context object of interface. The interface can be used for drawing lines as well as styling them on the <canvas> element.
Properties
The properties and available to draw and style lines inside the Canvas element are given in the below table.
| S.No | Property and Description |
|---|---|
| 1 | lineCap
The property lineCap helps us to style the ends of the lines drawn using lineTo() method. |
| 2 | lineDashOffset
This property helps us to draw dashed lines onto the Canvas. |
| 3 | lineJoin
This property allows to style the point where the endpoints of two line segments meet. |
| 4 | lineWidth
This property of the Canvas API can be used to change the thickness of the lines drawn on the Canvas element. |
| 5 | miterLimit
The property miterLimit of the CanvasRenderingContext2D interface helps us to set the ratio of miter limit. |
Methods
Following are the list of methods available to draw various types lines using HTML Canvas −
| S.No | Method & Description |
|---|---|
| 1 | getLineDash()
The method getLineDash() of Canvas API returns a line dash pattern. |
| 2 | lineTo()
This method draws a line from its current point to the point given as the parameters. |
| 3 | setLineDash()
This method can be used to set the line dash pattern while adding strokes to the lines in a Canvas element. |