The lineJoin property

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.

[No canvas support]

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();
    }
</script>