CanvasRenderingContext2D.miterLimit

The CanvasRenderingContext2D.miterLimit property of the Canvas 2D API sets the miter limit ratio in space units. When getting, it returns the current value (10.0 by default). When setting, zero, negative, Infinity and NaN values are ignored; otherwise the current value is set to the new value.

See also the chapter Applying styles and color in the Canvas Tutorial.

Syntax

ctx.miterLimit = value;

Options

value

A number specifying the miter limit ratio in space units. Zero, negative, Infinity and NaN values are ignored.

Examples

Using the miterLimit property

See the chapter Applying styles and color in the Canvas Tutorial for more information.

<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

Browser compatibility

WebKit/Blink-specific notes

• In WebKit- and Blink-based Browsers, a non-standard and deprecated method ctx.setMiterLimit() is implemented besides 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 it, CanvasRenderingContext2D
• CanvasRenderingContext2D.lineCap
• CanvasRenderingContext2D.lineJoin