You need to use: ctx.lineCap property literal translation is "line of hats," It has three property values:
1. butt: a square end
2. round: prototype-terminus
3. square: a square end, but the same will be more than a width, half height width extending square.
The following is a practical demonstration:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canv" width="300" height="300"></canvas> <script> function draw(){ var canvas = document.getElementById("canv"); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 150); ctx.lineWidth = 12; ctx.lineCap = "butt"; ctx.stroke(); ctx.beginPath(); ctx.moveTo(80, 50); ctx.lineTo(80, 150); ctx.lineWidth = 12; ctx.lineCap = "round"; ctx.stroke(); ctx.beginPath(); ctx.moveTo(120, 50); ctx.lineTo(120, 150); ctx.lineWidth = 12; ctx.lineCap = "square"; ctx.stroke(); } draw(); </script> </body> </html>
