HTML5 Canvas Reference - lineCap

lineCap attribute sets or gets the style of the end caps for a line.

It can be one of three values:

butt: Default. A flat edge that is perpendicular to the edge of the line.
round: A semicircle with a diameter set to the length of the edge of the line.
square: A rectangle. Its width is set to line width and its height is half the line width.

Browser compatibility


`lineCap`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.lineCap='butt|round|square';

Property Values

Value	Description
butt	Default value. Add flat edge to the end of line
round	Add rounded end cap to the end of line
square	Add square end cap to the end of line

Example

The following code shows the three line cap styles. It draws the lines real thick so you can see the line cap clearly.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    <!--from w w  w  .  j  a  v a  2s .co  m-->
    ctx.beginPath();
    ctx.lineWidth = 30;
    ctx.lineCap = "round";
    ctx.moveTo(20, 20);
    ctx.lineTo(180, 20);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.lineCap = "butt";
    ctx.moveTo(20, 60);
    ctx.lineTo(180, 60);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.lineCap = "square";
    ctx.moveTo(20, 100);
    ctx.lineTo(180, 100);
    ctx.stroke();
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code draws lines in three line cap styles and then it also draw three line join styles.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="150"></canvas>
<script>
   canvas  = document.getElementById("myCanvas"); 
   context = canvas.getContext("2d");
<!--from  w  ww .j  a va  2  s . c o m-->
   var width  = 60;
   var height = 75;
   var gap    = 50;

   context.strokeStyle   = "red";
   context.lineWidth     = 20;
   context.shadowOffsetX = 4;  
   context.shadowOffsetY = 4;
   context.shadowBlur    = 7;
   context.shadowColor   = "gray";

   //       xStart yStart cap
   drawLine(25,    25,    "butt"  );
   drawLine(25,    75,    "square");
   drawLine(25,    125,   "round" );

   // A5. DRAW joins.
   //       xStart                 yStart join
   drawJoin(175+(0*gap)+(0*width), 120,   "miter");
   drawJoin(175+(1*gap)+(1*width), 120,   "bevel");
   drawJoin(175+(2*gap)+(2*width), 120,   "round");

   // B. LINE DRAWING function.
   function drawLine(xStart, yStart, cap)
   {
      context.lineCap = cap;

      context.beginPath();
      context.moveTo(xStart,           yStart);
      context.lineTo(xStart+1.5*width, yStart);
      context.stroke();
   }
   function drawJoin(xStart, yStart, join)
   {
      context.lineCap  = "round";

      context.beginPath();
      context.moveTo(xStart,           yStart);
      context.lineTo(xStart+(width/2), yStart-height);
      context.lineTo(xStart+width,     yStart);
      context.lineJoin = join;
      context.stroke();
   }
</script>
</body>
</html>

The code above is rendered as follows: