Easy Tutorial
❮ Att Tr Char Att Ol Start ❯

HTML canvas miterLimit Property

HTML canvas Reference Manual

Example

Draw a line with a maximum miter length of 5:

JavaScript:


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the miterLimit property.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


Definition and Usage

The miterLimit property sets or returns the maximum miter length.

The miter length is the distance between the inner corner and the outer corner where two lines meet.

Tip: The miterLimit is only effective when the lineJoin property is "miter".

The smaller the angle of the corner, the larger the miter length.

To avoid an excessively long miter length, we use the miterLimit property.

If the miter length exceeds the value of miterLimit, the corner will be displayed using the "bevel" type of lineJoin (Fig 3):

Default value: 10
JavaScript syntax: context.miterLimit = number;
--- ---

Property Values

Value Description
number A positive number. Specifies the maximum miter length. If the miter length exceeds the miterLimit value, the corner will be displayed using the "bevel" type of lineJoin.

❮ Att Tr Char Att Ol Start ❯