Meet the lineJoin Property

By default, your corners have a particular look to them. That default look is fine and all, but you can totally change what your corners look like. The way you do that is by setting the lineJoin property:

The lineJoin property takes three values: miter, round, bevel. A value of miter is the default behavior, and it creates sharp corners:

The round value, shockingly, creates rounded corners:

The bevel property creates triangular corners:

You set the lineJoin property on our drawing context object…just like almost all of the drawing-related properties that we’ve seen so far. To see the lineJoin property in action, take a look at the following code:

This code draws a triangle. What makes this relevant for this tutorial is line 14, where we set the lineJoin property to a value of round. This would result in a triangle whose corners are all rounded. Simple bimple.

The miterLimit Property

As if setting the lineJoin property to miter isn’t exciting enough, you can set the miterLimit property:

context.miterLimit = 15;

This property stands for the ratio between half of the lineWidth value and the miter length. It acts as a threshold where if the value is too small, your lineJoin property value of miter will not kick in. I haven’t found a use for it in real life, but I figured I would mention it here for the sake of completeness.