Web/API/CanvasRenderingContext2D/miterLimit

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, and NaN values are ignored. The default value is 10.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
[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/240/1ef20a2b0f86279ce0e2f660d760eb7a/Canvas_miterlimit.png|class=internal]]

Specifications

Specification	Status	Comment
HTML Living StandardThe 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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
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 miterLimit to a negative value no longer throws an exception; instead, it properly ignores non-positive values.

See also

• The interface defining this property: CanvasRenderingContext2D
• CanvasRenderingContext2D.lineCap
• CanvasRenderingContext2D.lineJoin

CanvasRenderingContext2D.miterLimit by Mozilla Contributors is licensed under CC-BY-SA 2.5.