The CanvasRenderingContext2D.miterLimit property of the Canvas 2D API sets the miter limit ratio.
For more info about miters, see Applying styles and color in the Canvas tutorial.
Syntax
ctx.miterLimit = value;
Options
value- A number specifying the miter limit ratio, in coordinate space units. Zero, negative,
Infinity, andNaNvalues are ignored. The default value is10.0.
Examples
Using the miterLimit property
See the chapter Applying styles and color in the Canvas tutorial for more information.
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineTo(100, 100); ctx.stroke();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
| Screenshot | Live sample |
|---|---|
![]() |
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'CanvasRenderingContext2D.miterLimit' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
miterLimit | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1.5 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
WebKit/Blink-specific notes
- In WebKit- and Blink-based Browsers, a non-standard and deprecated method
ctx.setMiterLimit()is implemented in addition to this property.
Gecko-specific notes
- Starting Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), setting
miterLimitto a negative value no longer throws an exception; instead, it properly ignores non-positive values.
See also
- The interface defining this property:
CanvasRenderingContext2D CanvasRenderingContext2D.lineCapCanvasRenderingContext2D.lineJoin

