The lineCap property
Summary: The lineCap property is used to set how the ends of lines are drawn
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 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>