Categories
HTML JavaScript Web development

HTML Canvas Line Styles

HMTL Canvas Line Styles

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!