lineCap

Summary

Defines the type of endings the user agent will place on the end of lines.

Property of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var result = CanvasRenderingContext2D.lineCap;
CanvasRenderingContext2D.lineCap = value;

Return Value

Returns an object of type StringString

Valid values are:

• “butt”
• “round”
• “square”

Examples

The following example draws three lines with the different line endings. With blue lines showing where the normal end of the line is.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineCap = ['butt','round','square'];

  //Draw guides
  ctx.strokeStyle = '#09f';
  ctx.beginPath();
  ctx.moveTo(10,10);
  ctx.lineTo(140,10);
  ctx.moveTo(10,140);
  ctx.lineTo(140,140);
  ctx.stroke();

  // Draw lines
  ctx.strokeStyle = 'black';
  for (i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25+i*50,10);
    ctx.lineTo(25+i*50,140);
    ctx.stroke();
  }
}

Notes

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.

Related specifications

W3C HTML Canvas 2D Specification

W3C Editor’s Draft

Attributions

• This article contains content originally from external sources, including ones licensed under the CC-BY-SA license.

• Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: Article

• Microsoft Developer Network: Windows Internet Explorer API reference Article