Line Styles
Using Canvas, lines are drawn using three properties: lineWidth
, lineCap
, and
lineJoin
.
Line Width
The lineWidth
property controls the width of the line.
The following example shows the same line drawn with different widths:
for(i = 1; i < 10; i++) {
c.fillStyle = "black";
c.lineWidth = i;
c.beginPath();
c.moveTo(i * 10,10);
c.lineTo(i * 10,90);
c.stroke();
}
This code produces the following result:
Line Cap
The lineCap
property controls the way the end of the line is drawn. There are three different types of caps:
butt
(the default),
round
, and square
. butt
draws the line end with a flat end,
round
draws the line end with a rounded end, and
square
draws the line end with a squared end that extends past the final point.
The following example shows the different line caps:
var ends = ['butt','round','square'];
for(i=0;i<3;i++) {
c.fillStyle = "black";
c.lineWidth = 10;
c.lineCap = ends[i];
c.beginPath();
c.moveTo(20,20+20*i);
c.lineTo(50,20+20*i+20);
c.lineTo(80,20+20*i);
c.stroke();
}
This code produces the following result:
Line Join
The lineJoin
property controls the way line segments are joined together. There are three different types of line joins:
round
,
bevel
, and miter
(the default). round
draws a join with a round curve,
bevel
draws a join with a chopped off bevel, and
miter
draws a join with a straight angle.
The maximum length of the miter can be further controlled with the miterLimit
property.
The following example shows the different line joins:
var joins = ['round','bevel','miter'];
for(i=0;i<3;i++) {
c.fillStyle = "black";
c.lineWidth = 10;
c.lineJoin = joins[i];
c.beginPath();
c.moveTo(20,15+20*i);
c.lineTo(50,15+20*i+30);
c.lineTo(80,15+20*i);
c.stroke();
}
This code produces the following result:
Browser Support
The following table lists the attributes / methods related to this section and their browser compatibility:
Firefox | IE | Chrome | Opera | Safari | |
---|---|---|---|---|---|
Attributes / Methods | |||||
lineWidth | |||||
lineCap | |||||
lineJoin | |||||
miterLimit |