Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).
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
, andNaN
values 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.
Update compatibility data on GitHub
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support Yes | 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