1 out of 1 rated this helpful - Rate this topic

lineCap property

Gets or sets the current line cap style.

Syntax

JavaScript	`p = object.lineCap`

Property values

Type: String

butt: Default. A flat edge is put perpendicular to each end of the line with no cap added.
round: A semicircle or rounded end cap is added to each end of the line.
square: A square end cap is added to each end of the line.

Standards information

HTML Canvas 2D Context, Section 6

Remarks

The round and square styles for the lineCap property make the lines slightly longer. For round ends, the cap diameter equals the lineWidth value. The square style adds a rectangle with a width of 1/2 of lineWidth. Both the round and square styles add approximately 1/2 of the current lineWidth value to the end of a line. You should consider this addition if your graphics accuracy is critical.

Illustration of the arcTo example with tangent lines

Examples

The following code example draws lines with the three lineCap styles and adds guidelines to display the additional length that the lines add.

HTML


<html>
<head>
    <title>LineCap example</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              // Draw some lines with different line caps.
              var ctx = canvas.getContext("2d");
              var lStart = 50;
              var lEnd = 200;
              var yStart = 50;
              ctx.beginPath();
              ctx.lineWidth = "25";
              // Set the line caps and draw the lines
              ctx.lineCap = "butt";
              ctx.moveTo(lStart, yStart);
              ctx.lineTo(lEnd, yStart);
              ctx.stroke();
              ctx.beginPath();
              ctx.lineCap = "round";
              ctx.moveTo(lStart, yStart + 75);
              ctx.lineTo(lEnd, yStart + 75);
              ctx.stroke();
              ctx.beginPath();
              ctx.lineCap = "square";
              ctx.moveTo(lStart, yStart + 150);
              ctx.lineTo(lEnd, yStart + 150);
              ctx.stroke();

              // Add visualizer guidelines.      
              var x = lStart + ((lEnd - lStart) / 2);
              var capSize = ctx.lineWidth / 2;
              ctx.beginPath();
              ctx.lineWidth = "1";

              // Line length guidelines.
              ctx.strokeStyle = "blue";
              ctx.moveTo(lStart, 10);
              ctx.lineTo(lStart, 200);
              ctx.moveTo(lEnd, 10);
              ctx.lineTo(lEnd, 200);
              ctx.stroke();

              // Total line length guidelines.
              ctx.beginPath();
              ctx.strokeStyle = "red";
              ctx.moveTo(lStart - capSize, yStart + 25);
              ctx.lineTo(lStart - capSize, 240);
              ctx.moveTo(lEnd + capSize, yStart + 25);
              ctx.lineTo(lEnd + capSize, 240);
              ctx.stroke();

              // Annotate each line.      
              addText("<- line length ->", x, 20, "blue");
              addText("butt lineCap", x, yStart, "white");
              addText("round lineCap", x, yStart + 75, "white");
              addText("square lineCap", x, yStart + 150, "white");
              addText("<- Total line length ->", x, yStart + 180, "red");
          }
          function addText(text, x, y, color) {
              ctx.save();
              ctx.font = "400 16px/2 Unknown Font, sans-serif";
              ctx.textBaseline = "middle";
              var tMetric = ctx.measureText(text);
              ctx.fillStyle = color;
              ctx.fillText(text, (x - tMetric.width / 2), y);
              ctx.restore();
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="300" height="300">This browser or document mode doesn't support canvas</canvas> 
</body>
</html>

Community Additions

ADD