The lineCap property
The lineCap
property is used to change the way that the ends of lines are
drawn. The possible values are butt
(default),
round
and square
. Examples of these are shown below. Although the butt
and square
settings appear to be the same you
should note that the square
setting has an
overhang whilst the butt
setting does not.
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.lineCap = 'butt'; context.lineWidth = 25; context.moveTo(25,100); context.lineTo(175,100); context.stroke(); } </script>