CanvasRenderingContext2D.lineCap

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

Compatibilidad de navegador.

BCD tables only load in the browser

  • 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