JavaScript canvas2d object property: miterLimit
[this page | pdf | back links]
The miterLimit property of the JavaScript
DOM object returned
by the getContext("2d")
method applied to the HTML <canvas>
element sets / returns the maximum mitre limit.
The mitre is the distance
between the inner and outer corner where two lines meet. The miterLimit property is only relevant
if the lineJoin
property is miter. It will apply
when the angle between the two lines is small, when the corner will be
displayed as if its lineJoin
property is bevel.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<span id="element"></span>
<script>
var x2 = document.createElement("CANVAS");
x2.setAttribute("width", "300");
x2.setAttribute("height", "100");
x2.setAttribute("style", "border: 1px solid black");
var c2 = x2.getContext("2d");
c2.strokeStyle = "red";
c2.lineWidth = "8";
c2.moveTo(10, 10);
c2.lineTo(10, 80);
c2.lineTo(50, 30);
c2.stroke();
c2.beginPath();
c2.strokeStyle = "blue";
c2.lineJoin = "bevel";
c2.moveTo(80, 10);
c2.lineTo(80, 80);
c2.lineTo(120, 30);
c2.stroke();
c2.beginPath();
c2.strokeStyle = "green";
c2.lineJoin = "miter";
c2.miterLimit = 1;
c2.moveTo(150, 10);
c2.lineTo(150, 80);
c2.lineTo(190, 30);
c2.stroke();
c2.beginPath();
c2.strokeStyle = "orange";
c2.lineJoin = "round";
c2.moveTo(220, 10);
c2.lineTo(220, 80);
c2.lineTo(260, 30);
c2.stroke();
document.getElementById("element").appendChild(x2);
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)