lineJoin property
The lineJoin property specifies
how two lines are joined. Can take the
following values: miter - sharp
corner (default), round - rounded
corner, bevel - flat corner.
Syntax
context.lineJoin = 'miter', 'round' or 'bevel';
Example
We set the lineJoin property
to meter:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = 'meter';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
Example
We set the lineJoin property
to round:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
Example
We set the lineJoin
property to bevel:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = 'bevel';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
See also
-
the
miterLimitproperty
that sets the miter limit ratio -
the
lineCapproperty
that sets the type of a line end