HTML canvas miterLimit Property |

-- Learning is not just about technology, but also about dreams!

JavaScript Reference Manual

Overview

JavaScript Objects

Browser Objects

DOM Objects

HTML Objects

HTML DOM Button Object

<col>

Deep Dive

Scripting Languages
Programming Languages
Development Tools
Web Services
Computer Science
Software
Web Design and Development
Scripting
Programming
Web Service

HTML canvas miterLimit Property

Canvas Object Reference Manual Canvas Object

Example

Draw lines with a maximum miter length of 5:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The miterLimit property is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

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 refers to the distance between the inner corner and the outer corner where two lines meet.

Miter Limit figure 1

Note: The miterLimit property is only effective when the lineJoin property is set to "miter".

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

To avoid the miter length becoming _too long_, we can 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):

Miter Limit figure 2

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 value of miterLimit, the corner will be displayed using the "bevel" type of lineJoin.