Trazar una línea - Canvas

Para dibujar lineas en el <canvas> necesitamos algunas de las propiedades y métodos predefinidos en el HTML5:

	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.
stroke()	context.stroke();	Dibuja una línea ya definida. ¡OJO! Sin stroke() no hay línea.

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

Supongamos que queremos dibujar una línea de 3px de gruesa ( line width = ancho de la línea ).
Escribimos: ctx.lineWidth = 3; Note por favor que escribimos 3 y no 3px. Si no especificamos lineWidth, el ancho de línea será de 1px.
Queremos tambien que nuestra línea sea roja. ( stroke style = estilo de trazado ).
Escribimos: ctx.strokeStyle = "#f00"; Si no especificamos strokeStyle, el el color del trazado será negro.
Decidido todo esto empezamos a dibujar:
ctx.beginPath();
Nuestro lapiz tocará el canvas a x=20px, y=130px.
ctx.moveTo(20, 130);
Esbozamos una línea desde x=20px, y=130px ( el punto definido anteriormente ) a x=230px, y=20px.
ctx.lineTo(230, 20);
Finalmente trazamos nuestra linea. Note por favor que sin stroke() no habrá línea:
ctx.stroke();

A continuación lo ponemos todo junto:

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

window.onload = function() {
 var canvas = document.getElementById("linea1");
  if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
   if (ctx) {
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#f00";
    ctx.beginPath();
    ctx.moveTo(20, 130);
    ctx.lineTo(230, 20);
    ctx.stroke();
   }
  }
}

Como dibujar líneas finas

Por defecto el <canvas> de HTML5 “suaviza” las líneas, y esto queda muy bien en las líneas oblicuas. Sin embargo las líneas horizontales y verticales parecen más gruesas de lo que son en realidad. Esto llega a ser muy evidente, incluso molesto, en líneas muy finas ( ctx.lineWidth = 1 ), por ejemplo la cuadricula de un gráfico.
La buena noticia es que podemos eludir este problema utilizando el método translate().

En el caso de las líneas horizontales aplicaremos ctx.translate(0, .5);
Para las líneas verticales utilizaremos ctx.translate(.5, 0);

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

window.onload = function() {
 var canvas2 = document.getElementById("linea2");
  if (canvas2 && canvas2.getContext) {
  var ctx = canvas2.getContext("2d");
   if (ctx) {
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#f00";
    //dibuja la primera línea 
    ctx.beginPath();
    ctx.moveTo(20, 25);
    ctx.lineTo(230, 25);
    ctx.stroke();
    // dibuja una segunda línea  MÁS FINA;
    ctx.translate(0, .5);
    ctx.beginPath();
    ctx.moveTo(20, 50);
    ctx.lineTo(230, 50);
    ctx.stroke();
   }
  }
}

Dividir una línea en n segmentos iguales

Veamos primero cómo encontrar el punto medio de una línea.
Hemos visto que para trazar una línea en <canvas> necesitamos conocer las coordinadas x e y de sus dos extremos:

var a = {x:50, y:50} // el punto a
var b = {x:300, y:250}  // el punto b
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);

Las coordinadas del punto medio  las encontramos dividiendo por 2 la distancia en x: (b.x - a.x)/2 y la distancia en y: (b.y - a.y)/2. A esto le sumamos el valor de las coordenadas del primer punto ( a.x y respectivamente a.y ).

var puntoMedio = 
  {  x: a.x + (b.x - a.x)/2,
     y: a.y + (b.y - a.y)/2
  }

Para dividir una línea en n segmentos iguales hacemos lo mismo, solo que esta vez en lugar de dividir por 2 dividimos por n:

var n = 10;
for( var i = 0; i < = n; i++){
var s = {x:((b.x - a.x)*(i/n))+ a.x, y:((b.y - a.y)*(i/n))+ a.y}
. . . 
}

<canvas id="canv">Su navegador no soporta canvas :( </canvas>

var c = document.getElementById("canv");
var contexto = c.getContext("2d");

var cw = c.width = 350,
  cx = cw / 2;
var ch = c.height = 300,
  cy = ch / 2;

var rad = Math.PI / 180;

var a = {
  x: 50,
  y: 50,
  text: " A"
}
var b = {
  x: 300,
  y: 250,
  text: " B"
}

contexto.beginPath();
contexto.moveTo(a.x, a.y);
contexto.lineTo(b.x, b.y);
contexto.stroke();

contexto.font = "16px Verdana";
contexto.fillStyle = "blue";
contexto.fillText(a.text, a.x, a.y - 5);
contexto.fillText(b.text, b.x + 5, b.y);

var m = {
  x: ((b.x - a.x) / 2) + a.x,
  y: ((b.y - a.y) / 2) + a.y
}
contexto.beginPath();

contexto.strokeStyle = "red";
var n = 10;
for (var i = 0; i <= n; i++) {
  var s = {
    x: ((b.x - a.x) * i / n) + a.x,
    y: ((b.y - a.y) * i / n) + a.y
  }
  contexto.beginPath();
  contexto.arc(s.x, s.y, 3, 0, 2 * Math.PI);
  contexto.stroke();
}