Formas de lineas: áncho y extremos

Una linea puede ser ancha, estrecha, de colores, con acabados redondeados, uniones... Existen varias propiedades aplicables a cualquier linea que sea trazada por un lápiz. En estos ejemplos irás viendo cuales son.

En el primer ejemplo tienes el grosor y los acabados. El grosor es la propiedad lineWidth, un valor numérico que indica el grosor de la linea en pixels. Puedes consultarlo para usarlo en o escribirlo, como todfas las propiedades.

El acabado de linea recta puede se redondeada o plano. La diferencia se ve mejor usando lineas gruesas como en el ejemplo. Esta propiedad se denomina lineCap y los valores posibles son: butt, round, square.

Más que explicar como es cada una lo mejor es verlas en funcionamiento. En el ejemplo tienes los tres casos

<canvas id="mipapel" width="400" height="500"></canvas>
<script>
	miLienzo = document.getElementById("mipapel"); 
	lapiz = miLienzo.getContext("2d");
	lapiz.beginPath();
	lapiz.lineWidth = 20;
	lapiz.lineCap = "butt"
	lapiz.moveTo(10,10);
	lapiz.lineTo(100,10);
	lapiz.stroke();
	lapiz.beginPath();
	lapiz.lineCap = "square"
	lapiz.moveTo(10,40);
	lapiz.lineTo(100,40);
	lapiz.stroke();
	lapiz.beginPath();
	lapiz.lineCap = "round";
	lapiz.moveTo(10,70);
	lapiz.lineTo(100,70);
	lapiz.stroke();
	//esto es para el texto explicativo
	lapiz.font = "18px Arial";
	lapiz.textBaseline= "middle";
	lapiz.fillText("butt", 120, 10);
	lapiz.fillText("square", 120, 40);
	lapiz.fillText("round", 120, 70);
</script> 
Prueba este código
Como ves: definimos cada linea con su lineCap y dibujamos. Es necesario usar beginPath() para reiniciar el trazado, si no se superponen.

Uniones de lineas

En el apartado anterior has visto como controlar el extremo de una linea, en este vas a ver como se pueden unir cuando se encuentrasn. La propiedad es lineJoin y permite tres valores: bevel, round, mitter. En el caso del mitter tienes una propiedad más la longitud de la unión, mitterLimit, si la unión es más ancha se convierte en biselada (bevel). No tiene demasiada utilidad.
<canvas id="mipapel" width="400" height="500"></canvas>
<script>	miLienzo = document.getElementById("mipapel"); 
	lapiz = miLienzo.getContext("2d");
	lapiz.beginPath();
	lapiz.lineWidth = 10;
	lapiz.lineJoin= "bevel"; //biselado
	lapiz.moveTo(10,10);
	lapiz.lineTo(100,20);
	lapiz.lineTo(10,40);
	lapiz.stroke();
	lapiz.beginPath();
	lapiz.lineWidth = 10;
	lapiz.lineJoin= "round"; //redondeado
	lapiz.moveTo(10,50);
	lapiz.lineTo(100, 60);
	lapiz.lineTo(10, 80);
	lapiz.stroke();	
	lapiz.beginPath();
	lapiz.lineWidth = 10;
	lapiz.lineJoin= "miter";
	lapiz.miterLimit = 3; //modifica este valor para ver su efecto
	lapiz.moveTo(10,100);
	lapiz.lineTo(100,120);
	lapiz.lineTo(10, 140);
	lapiz.stroke();
</script> 
Prueba este código