Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La propiedad CanvasRenderingContext2D.lineCap del API Canvas 2D determina la forma usada para dibujar los puntos finales de las líneas.

Nota: La líneas se puede dibujar con los métodos stroke()strokeRect(), y strokeText().

Sintaxis

ctx.lineCap = "butt" || "round" || "square";

Opciones

"butt"
Los finales de las líneas son recortados. Valor por defecto.
"round"
Los finales de las líneas son redondeados.
"square"
Los finales de líneas son recortados al agregar un cuadrado de ancho y altura igual que el grosor de línea.

Ejemplos

Cambiando los finales de línea

En este ejemplo se redondean los puntos finales de una línea recta.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = 'round';
ctx.lineTo(100, 100);
ctx.stroke();

Result

Comparando los finales de línea

En este ejemplo se dibujan 3 líneas, cada una con un valor distinto de la propiedad lineCap. Se agregaron dos guías para resaltar las diferencias entre las tres líneas. Cada una de estas líneas empiezan y terminan en estas guías.

La línea de la izquiera usa la opción por defecto "butt". Esta es dibujada completamente al ras de las líneas de guía. La segunda esta configurada para usar la opción "round. Esta agrega un semicírculo al final que tiene un radio de la mitad del grosor de línea. La línea de la derecha use la opción "square". Esta agrega un cuadrado con ancho y altura de la mitad del grosor de línea.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const 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 (let 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();
}

ScreenshotLive sample

Especificaciones

Specification Status Comment
HTML Living Standard
La definición de 'CanvasRenderingContext2D.lineCap' en esta especificación.
Living Standard  

Compatibilidad de navegador.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidEdge MobileFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
lineCapChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo 1.5IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo

  • En WebKit- y navegadores basados en Blink, el método no estandard  y obsoleto ctx.setLineCap() es implementado ademas de esta propiedad.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: Ricardo_F.
Última actualización por: Ricardo_F.,