CanvasRenderingContext2D: miterLimit property
The CanvasRenderingContext2D.miterLimit property of the
Canvas 2D API sets the miter limit ratio.
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.
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>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", () => {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", () => {
textarea.focus();
});
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
| Screenshot | Live sample |
|---|
 | |
BCD tables only load in the browser