En este post te voy a enseñar a dibujar líneas (de diferente color) en un elemento canvas de HTML usando los métodos moveTo y lineTo, además de cambiar el grosor de las mismas.

Todo esto lo haremos con JavaScript y el elemento canvas de HTML.

Funciones moveTo y lineTo

La función moveTo indica el punto de comienzo de un trazo, en este caso indica el inicio de la línea.

Su sintaxis es:

contexto.moveTo(x, y)

En donde x e y son coordenadas.

Por otro lado, la función lineTo, dibuja una línea hasta determinadas coordenadas; en otras palabras indica el final de la línea.

Su sintaxis es:

contexto.lineTo(x, y)

En donde x e y son las coordenadas de fin.

Ejemplo de líneas con JavaScript

Veamos un ejemplo. Para trabajar con Canvas desde JavaScript hay que declarar el elemento <canvas> (o crearlo y adjuntarlo, pero eso es otra historia) en HTML y después obtener una referencia al mismo usando getElementById o querySelector.

See the gist on github.

Cuando tenemos al elemento del DOM, obtenemos el contexto con getContext("2d") y sobre él ya podemos dibujar.

Finalmente, para dibujar todo o trazar todo, llamamos al método stroke.

El resultado se ve así:

Puedes probar el código aquí.

Colores y grosor

Los colores se controlan a través de strokeStyle, se puede poner un color rgb, el nombre del color, o su valor hexadecimal.

El grosor de la línea se define con contexto.lineWidth

Finalmente, recuerda llamar a beginPath y stroke cada que traces una línea, si no, los colores y estilos pueden mezclarse.