Puntas de línea (lineCap) - Canvas

Para dibujar lineas en el <canvas>, además de los metodos que ya hemos visto, podemos utilizar la propiedad lineCap para dar formato a las puntas de línea. Los valores que puede tomar lineCap son "butt" (tope), "round" (redondeado) y "square" (cuadrado)

	JavaScript	Descripción	Defecto
lineWidth	context.lineWidth=numero;	Determina (sets) o devuelve (returns) la grosor de la línea.	1
strokeStyle	context.strokeStyle=color|gradient|pattern;	Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea.	negro
beginPath()	context.beginPath();	Empezamos a dibujar
moveTo()	context.moveTo(x,y);	Mueve el "lapiz" a un punto en el canvas, especificado por sus coordenadas "x" e "y". NO DIBUJA ninguna línea.	x=0; y=0;
lineTo()	context.lineTo(x,y);	Define una línea desde un punto especificado anteriormente hasta otro punto especificado por sus coordenadas "x" e "y". Mueve el "lapiz" a este punto.
lineCap	context.lineCap="butt|round|square";	Determina (sets) o devuelve (returns) el aspecto de las puntas de una línea.	butt
stroke()	context.stroke();	Dibuja una línea ya definida.

Vea la chuleta con las propiedades y metodos() de canvas.

Veamos un ejemplo. A continuación dibujamos 3 líneas del mismo tamaño, cada una con otro tipo de punta. La línea de arriba tiene una punta de línea normal (ctx.lineCap = "butt";), la del medio tiene una punta de línea redondeada (ctx.lineCap = "round";), mientras que la de abajo tiene una punta de línea cuadrada (ctx.lineCap = "square";).

<canvas id="juntas" width="250" height="200">Su navegador no soporta canvas :( </canvas>

 var canvas = document.getElementById("juntas");
  if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
   if (ctx) {
    ctx.lineWidth = 25;
    ctx.strokeStyle = "#00f";
    // la línea de arriba
    ctx.beginPath();
    ctx.lineCap = "butt";
    ctx.moveTo(25, 50);
    ctx.lineTo(225, 50);
    ctx.stroke();
    // la línea del medio
    ctx.beginPath();
    ctx.lineCap = "round";
    ctx.moveTo(25, 100);
    ctx.lineTo(225, 100);
    ctx.stroke();
    // la línea de abajo
    ctx.beginPath();
    ctx.lineCap = "square";
    ctx.moveTo(25, 150);
    ctx.lineTo(225, 150);
    ctx.stroke();
    //las guias
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#ccc";
    ctx.moveTo(25, 25);
    ctx.lineTo(25, 175);
    ctx.moveTo(225, 25);
    ctx.lineTo(225, 175);
    ctx.stroke();    
    }
  }