Line-Drawing Attributes

Line-Drawing Attributes

Canvas has a lot of line-drawing attributes some of which we have used in previous examples, for example the lineWidth property, which specifies the width of lines drawn by stroke() and strokeRect() methods.

lineWidth

The lineWidth property has a default value of 1 pixel. lineWidth can be set to any positive value, even a fractional value that is less than 1. A line less than one pixel wide is drawn with a translucent colors, so that it looks less dark than a 1-pixel-wide
line.

Lines and curves drawn by the stroke() method are centered over the path. Which means each half of the lineWidth is on either side of the path.

lineCap

The lineCap property specifies how the ends of a line or subpath are rendered. This attribute has three values you can choose from:

  • butt
  • square
  • round

The default lineCap value is “butt” which means that the line terminates rather abruptly at the ending point. The “square” value means that the line extends beyond the ending point by half of the line width. The “round” value means that the line extends with a semi-circle (of radius half the lineWidth) beyond the ending point. The lineCap attribute is set as follows:

//either
context.lineCap = "butt";

//or
context.lineCap = "square";

//or
context.lineCap = "round";

and it is set before calling the stroke() method.

Linecap

The diagram above shows the three lineCap attribute values in the order, butt, square, round. As you can see, butt and square look the same in appearance but square has the effect of extending the line by half the lineWidth each way.

lineJoin

The lineJoin property specifies how the vertices (corners) between subpath segments are joined.

This attribute has three values you can choose from:

  • miter
  • round
  • bevel

Its default value is "miter", which means that the outside edges of the two lines are extended until they meet. The "round" value means that the vertex is rounded off. The “bevel” value means that the vertex is cut off with a straight line.


miter example

var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 20;
context.strokeStyle = "blue";

context.beginPath();
context.moveTo(100, 150);
context.lineTo(400, 150);
context.lineTo(400, 400);
context.lineJoin = "miter";
context.closePath();
context.stroke();

Miter




round example

var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 20;
context.strokeStyle = "blue";

context.beginPath();
context.moveTo(100, 150);
context.lineTo(400, 150);
context.lineTo(400, 400);
context.lineJoin = "round";
context.closePath();
context.stroke();

round




bevel example

var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 20;
context.strokeStyle = "blue";

context.beginPath();
context.moveTo(100, 150);
context.lineTo(400, 150);
context.lineTo(400, 400);
context.lineJoin = "bevel";
context.closePath();
context.stroke();

Bevel



miterLimit

Then there is the miterLimit attribute which only applies when lineJoin is set to "miter". Sometimes when two subpaths meet at a sharp angle, the miter of the vertex can become quite long, and visually distracting. That is where the miterLimit property becomes important. It creates an upper limit on the miter length.

If the miter at any given vertex becomes longer than half the line width multiplied by the miterLimit, then the vertex would be drawn with a beveled joint instead of a mitered joint. For example in the example below the miterLimit is exceeded in two of the three angles and they are bevelled.


miterLimit example

var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.lineWidth = 20;
context.strokeStyle = "blue";

context.beginPath();
context.moveTo(100, 150);
context.lineTo(400, 150);
context.lineTo(400, 400);
context.lineJoin = "miter";
context.miterLimit = 2;
context.closePath();
context.stroke();

Miterlimit