Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/apis/canvas/CanvasRenderingContext2D/lineCap below:

lineCap · WebPlatform Docs

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

Property of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

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

Returns an object of type StringString

Valid values are:

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

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'];

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

  
  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();
  }
}

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.

W3C HTML Canvas 2D Specification

W3C Editor’s Draft

• 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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4