Line cap and join
<!DOCTYPE html> <html> <head> <style> #canvas { /*from ww w . j a v a 2 s . c o m*/ border:1px solid #03F; background:#CFC; } </style> </head> <body> <canvas id="canvas" width="640" height="480"></canvas> <script> let context = document.getElementById('canvas').getContext('2d'); //round end. bevel join, at top left of canvas context.strokeStyle = "black"; //need list of available colors context.lineWidth=10; context.lineJoin='bevel'; context.lineCap='round'; context.beginPath(); context.moveTo(0, 0); context.lineTo(25, 0); context.lineTo(25,25); context.stroke(); context.closePath(); //round end, bevel join, not at top or left of canvas context.beginPath(); context.moveTo(10, 50); context.lineTo(35, 50); context.lineTo(35,75); context.stroke(); context.closePath(); //flat end, round join, not at top or left context.lineJoin='round'; context.lineCap='butt'; context.beginPath(); context.moveTo(10, 100); context.lineTo(35, 100); context.lineTo(35,125); context.stroke(); context.closePath(); </script> </body> </html>