The lineWidth property
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 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