lineCap
The HTML canvas lineCap property sets or returns the style of the end caps for a line.
Syntax:
context.lineCap="butt|round|square";butt (default) – flat edges.
round – round edges.
square – square edges.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="lineCap" width="240" height="150" style="border:1px solid #333;">
</canvas>
<script>
var c = document.getElementById("lineCap");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 8;
ctx.lineCap = "butt";
ctx.moveTo(30, 20);
ctx.lineTo(200, 20);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(30, 70);
ctx.lineTo(200, 70);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(30, 120);
ctx.lineTo(200, 120);
ctx.stroke();
</script>
</body>
</html>Output:
lineJoin
The HTML canvas lineJoin property sets or returns the type of corner created, when two lines meet.
Syntax:
context.lineJoin="miter|round|bevel";miter (default) – a sharp corner.
round – a rounded corner.
bevel – a beveled corner.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="roundedCorener" width="200" height="200" style="border:1px solid #333;">
</canvas>
<script>
var c = document.getElementById("roundedCorener");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(150, 75);
ctx.lineTo(20, 150);
ctx.stroke();
</script>
</body>
</html>Output:
lineWidth
The HTML canvas lineWidth property sets or returns the current line width, in pixels.
Syntax:
context.lineWidth=number;number – line width, in pixels.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="lineWidth" width="200" height="200" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("lineWidth");
var ctx = c.getContext("2d");
ctx.lineWidth = 8;
ctx.strokeRect(50, 50, 100, 100);
</script>
</body>
</html>Output:
miterLimit
The HTML canvas miterLimit property sets or returns the maximum miter length.
The miter length is the distance between the inner corner and the outer corner where two lines meet.
Syntax:
context.miterLimit=number;number – a positive number that defines the maximum miter length.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="miterLimit" width="200" height="150" style="border:1px solid #333;"></canvas>
<script>
var c = document.getElementById("miterLimit");
var ctx = c.getContext("2d");
ctx.lineWidth = 8;
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();
</script>
</body>
</html>Output:
Enjoy coding!