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