The lineWidth property

Summary: The linewidth property is used to set the thickness of lines which are drawn on the canvas

[No canvas support]

The lineWidth property is used to set the width of the lines which 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 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 X and Y 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: