Source Code:
<!DOCTYPE html> <html> <body> <p>The three different line caps:</p> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.lineWidth=10; ctx.lineCap="butt"; ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.stroke(); ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(20,40); ctx.lineTo(200,40); ctx.stroke(); ctx.beginPath(); ctx.lineCap="square"; ctx.moveTo(20,60); ctx.lineTo(200,60); ctx.stroke(); </script> </body> </html>
Result:
W3Schools.com
- Try it yourself