Canvas lineJoin Property

Watch a demo of different values of the lineJoin property.

Or click a specific value to see the result:

lineJoin = 'bevel';
lineJoin = 'round';
lineJoin = 'miter';
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
const c = document.getElementById('myCanvas');
const ctx = c.getContext('2d');
ctx.lineWidth=10;  
ctx.lineJoin='round';   
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

Play more with the code in our Tryit yourself editor: Try it Yourself ❯