# Modifying How Corners Look

by [ kirupa](https://www.kirupa.com/me/index.htm) | filed under [Working with the Canvas](https://www.kirupa.com/canvas/index.htm)

[ Have questions? Discuss this HTML5 / Canvas tutorial with others on the forums.](https://www.kirupa.com/forum/showthread.php?374434-Drawing-Circles-on-a-Canvas)

When drawing on the `canvas`, you create corners all the time:

![](https://www.kirupa.com/canvas/images/examples_linjoin_144.png)

This is such a frequent occurrence, you normally don't even pay much attention to all the times it happens. We are going to change that with this tutorial. In the next couple of sections, you will not only learn to notice what these corners look like, you will also learn all about the `lineJoin` property and how to adjust their appearance.

Onwards!

## 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:

![](https://www.kirupa.com/canvas/images/linejoin_examples_144.png)

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

![](https://www.kirupa.com/canvas/images/miter_144.png)

The **round** value, shockingly, creates rounded corners:

![](round_144.png)

The **bevel** property creates triangular corners:

![](https://www.kirupa.com/canvas/images/bevel_144.png)

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:

```js
// the triangle
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);
context.closePath();

// the outline
context.lineWidth = 10;
context.strokeStyle = '#666666';
context.lineJoin = "round";
context.stroke();

// the fill color
context.fillStyle = "#FFCC00";
context.fill();
```

This code draws a triangle. What makes this relevant for this tutorial is the highlighted line 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:

```js
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.

## Conclusion

Putting my general snarkiness of this topic aside, it's admirable that we have so much control over something that seems trivial. The `lineJoin` property's default value of **miter** is appropriate for many situations, but when you are using the `canvas` to represent charts or other very line-heavy things, being able to customize how the corners look is essential...maybe!