The lineCap attribute allows you to control how lines end, and typically offers three choices: butt, round and square.
In the above figure, each of the 3 lines end at y =100. If you are using lineCap = "butt", the line will end exactly at y=100 with sharp edges. lineCap = "square" option is similar in terms of how the edges look except that it extends the line slightly over y=100; If you want the line to have a curved edge, use the lineCap = "round" option.
The lineCap applies only if you are drawing paths and has no influence on text.
HTML Code
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
// Let's keep the lineWidth high so that the difference in lineCap is obvious
ctx.lineWidth=6.0;
// Feel free to change lineCap to other options viz., square and butt
ctx.lineCap = "round";
// Let's draw a line now
ctx.moveTo(100, 20);
ctx.lineTo(200, 20);
ctx.stroke();
