Canvas reference: The lineWidth property

[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 antialiasing effect of the canvas can make lines look thicker than they actully 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: