Summary -
In this topic, we described about the below sections -
We can draw a straight line on canvas. The most important techniques utilized this purpose are lineTo( ), moveTo( ), and stroke( ) etc.
We require the following methods to draw lines on the canvas −
| Method | Description |
|---|---|
| beginPath() | This technique resets the present path. |
| moveTo(x, y) | This technique is used to describe the location of drawing cursor on the canvas. |
| lineTo(x, y) | This technique is used to describe the coordinates of the lines end point. |
| closePath() | This technique marks the present subpath as closed and starts a new subpath with a point the similar as the start and end of the recently closed subpath. |
| fill() | This technique fills the subpaths with the present fill style. |
| stroke() | This technique strokes the subpaths with the present stroke style. |
Example -
Below simple example shows how we write a line in Canvas
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas1" width="300" height="200"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c =document.getElementById("myCanvas1");
var ctx=c.getContext("2d");
ctx.moveTo(50,150);
ctx.lineTo(250,50);
ctx.stroke();
</script>
</body>
</html>
Output-
Line properties
Below are the list of properties used to style the lines -
| Property | Description |
|---|---|
| lineWidth [ = value ] | This property returns the existing line width and can be arranged, to alter the line width. |
| lineCap [ = value ] | This property returns the existing line cap style and can be organized, to alter the line cap style. The possible line cap styles are butt, round, and square. |
| lineJoin [ = value ] | This property returns the present line join style and can be organized, to alter the line join style. The possible line join styles are bevel, round, and miter. |
| miterLimit [ = value ] | This property returns the existing miter limit ratio and can be prepared, to alter the miter limit ratio. |
linewidth()
The lineWidth property provides the width (in pixels) of lines. The property value is a positive number (by default value 1).On setting negative, zero, NaN values, the new value gets ignored and the old value remains unchanged.
Example -
In the following example describes about the rectangular with a line width of 8 pixels.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas2" width="250" height="200"
style="border:2px solid #00d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.lineWidth = 8;
ctx.strokeRect(20, 20, 80, 100);
</script>
</body>
</html>
Output -
lineCap()
lineCap property is used to sets or gets the existing line cap style. Line cap property contains three cap styles. They are -
- butt - Default. A flat edge is placed perpendicular to every end of the line with no cap added.
- round - A rounded, or semi-circular end cap is added to every end of the line.
- square - A square end cap is added to every end of the line.
Example: -
The following example describes about draw a line with rounded end caps.
<!DOCTYPE html>
<html>
<body>
<p>The three different line caps:</p>
<canvas id="myCanvas3" width="250" height="180"
style="border:2px solid #00d3d3;">
Your browser does not support the HTML5
canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth =20;
ctx.lineCap = "butt";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20, 80);
ctx.lineTo(200, 80);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(20, 140);
ctx.lineTo(200, 140);
ctx.stroke();
</script>
</body>
</html>
Output -
The three different line caps:&
lineJoin()
When two lines join, lineJoin property is used to set or get the type of corner that is established. Line join contains three values and they are -
- bevel - When establishing a bevelled corner, a filled triangle attaches the two lines that are joined.
- round - Lines join with a rounded corner.
- square - Default. Lines join with a smoothly mitered corner.
Example -
The following example describes about how to create a rounded corner when the two lines meet.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas4" width="250" height="110"
style="border:2px solid #00d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas4");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 6;
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
ctx.stroke();
</script>
</body>
</html>
Output-
miterLimit()
The miterLimit property returns or sets the highest miter length.
The miter length is the space between the inner and the outer corners of two lines where they met.
Tip: The miterLimit property operates only if the lineJoin attribute is "miter".
Example -
The following example describes how to draw lines with maximum meter length 6.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas5" width="250" height="100"
style="border:2px solid #00d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas5");
var ctx = c.getContext("2d");
ctx.lineWidth = 8;
ctx.lineJoin = "miter";
ctx.miterLimit = 6;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();
</script>
</body>
</html>
Output -
Colouring Lines
We can use strokeStyle property to color the lines. The default color is black.
Syntax -
object.strokeStyle = color.
Example-
The following example describes about how we color the lines in canvas.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Color Lines</title>
</head>
<body>
<canvas id="myCanvas6" width="210" height="110"
style="border:2px solid #00d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById('myCanvas6');
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(70, 10);
context.lineTo(70, 100);
context.lineWidth = 5;
// set line color
context.strokeStyle = '#8ac92c';
context.stroke();
context.beginPath();
context.moveTo(140, 10);
context.lineTo(140, 100);
context.lineWidth = 5;
// set line color
context.strokeStyle = '#8d2cc9';
context.stroke();
</script>
</body>
</html>
Output -
Browser Support
The following browsers with versions in the table indicates the initial browser version that completely supports the drawline( ) method -
| Method | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| drawline( ) | Yes | 9.0 and above | Yes | Yes | Yes |