The lineWidth property

• An example
• See also

The lineWidth property is used to set the width of the lines that are drawn on the canvas. It doesn't just affect the lineTo function - but also other functions such as bezierCurveTo, quadraticCurveTo and strokeRect etc. Keep in mind when you use thicker lines that half of the line is drawn on one side of the coordinates that you give and half on the other. So if you're drawing a shape, stroking it and then filling it then the fill will cover half of the line - which you may not see if you use a solid (non-transparent) color.

Remember that the anti-aliasing effect of the canvas can make lines look thicker than they actually are. The canvas here has been translated by half a pixel (both horizontal and vertical directions) so that lines look crisp and sharp.

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.moveTo(33,33);
        context.lineTo(166,33);
        context.stroke();
        
        context.beginPath();
        context.lineWidth = 5;
        context.moveTo(33,66);
        context.lineTo(166,66);
        context.stroke();
        
        context.beginPath();
        context.lineWidth = 15;
        context.moveTo(33,100);
        context.lineTo(166,100);
        context.stroke();
        
        context.beginPath();
        context.lineWidth = 25;
        context.moveTo(33,133);
        context.lineTo(166,133);
        context.stroke();
    }
</script>

See also

• How to get crisp lines with no anti-aliasing