html5-canvas Path (Syntax only) lineCap (a path styling attribute)
Example
context.lineCap=capStyle // butt (default), round, square
Sets the cap style of line starting points and ending points.
-
butt, the default lineCap style, shows squared caps that do not extend beyond the line's starting and ending points.
-
round, shows rounded caps that extend beyond the line's starting and ending points.
-
square, shows squared caps that extend beyond the line's starting and ending points.
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth=15;
// lineCap default: butt
ctx.lineCap='butt';
drawLine(50,40,200,40);
// lineCap: round
ctx.lineCap='round';
drawLine(50,70,200,70);
// lineCap: square
ctx.lineCap='square';
drawLine(50,100,200,100);
// utility function to draw a line
function drawLine(startX,startY,endX,endY){
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
}
// For demo only,
// Rulers to show which lineCaps extend beyond endpoints
ctx.lineWidth=1;
ctx.strokeStyle='red';
drawLine(50,20,50,120);
drawLine(200,20,200,120);
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=300 height=200></canvas>
</body>
</html>
