The lineJoin property

Summary: The lineJoin property is used to set the way that the corners are drawn

The lineJoin property is used to set how lines are drawn when they are connected. There are three possible values: bevel round and miter. Initially the setting is miter. Below are examples of the different types.

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        // Translate by half a pixel - this makes lines look crisp
        context.translate(0.5, 0.5);
    
        context.beginPath();
        context.lineJoin = 'bevel';
        context.lineWidth = 25;
        context.moveTo(50,150);
        context.lineTo(100,50);
        context.lineTo(150, 150);
        context.stroke();
    }