Canvas con JavaScript puro.

Como se menciono anteriormente, la etiqueta <canvas>, es una de las etiquetas

integradas en la ultima actualización de HTML, HTML5. Canvas es la etiqueta que
HTML5 integra para el dibujo y manipulación de graficos en un entorno totalmente
HTML5, buscando de esta forma reemplazar los plugins de terceros que
comúnmente se utilizan para la manipulación de contenido grafico y multimedia,
como Flash de Adobe.
Canvas se define como cualquier otra etiqueta de HTML.
Identificador Ancho Alto

Se inicializa la etiqueta <canvas id="canvas" width="700" height="500" >

Canvas no soportado.
</canvas> Se cierra la etiqueta

Como se observa en la Figura, la definición de la etiqueta es muy simple, solo se

definen el “id” que identificara nuestro canvas cuando se creen las funciones para
el dibujo, y el width y heigth que corresponden a la anchura y altura del lienzo.
Pero, para poder darle funcionalidad debemos recurrir a la programacion en
JavaScript. JavaScript junto con CSS integran la programacion de documentos
basados en HTML. JavaScript se encarga de la parte dinámica, mientras que
CSS se encarga de darle estilo y diseño al documento. Para el caso de Canvas,
JavaScript ya provee las funcionalidades básicas para crear un grafico.
¿Cómo es esto posible? La respuesta es: Eventos. Los eventos son enviados por
objetos cuando se produce un evento definido. Otros objetos escuchan eventos
para que puedan hacer algo basado en el evento. Algunos eventos comunes que
un objeto en JavaScript podría escuchar son pulsaciones de teclas, movimientos
del ratón y cuando algo ha terminado de cargar.

El método getContext().
Para comenzar a utilizar canvas, debemos recurrir al método getContext(), que es
el primer método a llamar cuando se trabaja con canvas. El getContext() define el
contexto del canvas en el que se esta trabajando, y que puede ser ‘2d’ o ‘3d’.
var canvas = document.getElementById('canvasJS'),
contexto = canvas.getContext('2d');

Después de definir el contexto, es momento de dibujar en el lienzo. Para poder

dibujar en el lienzo de canvas debemos recurrir a los métodos nativos de canvas.
en el Ejemplo, haremos uso de los métodos stroke(), strokeStyle(), beginPath(),
moveTo() y lineTo() de canvas para crear una grilla. Estos son los métodos
nativos de canvas. Antes de hacer la demostración del uso de estos métodos,
para poder entender mejor el método que se esta empleando definiremos cada
uno de ellos.
 beginPath(): Este es el método inicial para trazar una nueva figura, y debe
inicializarse antes que la figura que se pretende trazar.
 moveTo(): Este método mueve el lápiz a una posición especificadam esto
permite comenzar o continuar el trazado desde un punto diferente, evitando
con esto líneas continuas.
 lineTo(): Este método genera una línea recta desde la posición actual del
lápiz hasta la nueva declarada por los atributos x e y.
 stroke(): Este método dibuja el contorno de una figura.
 strokeStyle(): Este método es el encargado de darle el color a una figura.

function dibujarGrilla(contexto, color, x, y)

{
contexto.strokeStyle = color;
contexto.lineWidth = 1.0;

for (var i = x + 1.0; i < contexto.canvas.width; i += x) {

contexto.beginPath();
contexto.moveTo(i, 0);
contexto.lineTo(i, contexto.canvas.height);
contexto.stroke();
}

for (var i = y + 1.0; i < contexto.canvas.height; i += y) {

contexto.beginPath();
contexto.moveTo(0, i);
contexto.lineTo(contexto.canvas.width, i);
contexto.stroke();
}

contexto.restore();
}

dibujarGrilla(contexto, '#482461', 10, 10);

Se definen las propiedades para el dibujo de la forma, que son color, el contexto
del canvas (2d) y las posiciones en x y en y. Se comienza el dibujo de la figura con
beginPath(), en este ejemplo establecemos el trazado en ambas direcciones,
mediante los ciclos for partiendo de la posición en i, hacia x e y respectivamente.
El método moveTo(), posicionara el lápiz en el siguiente punto, y el método
lineTo(), trazara las líneas desde ese punto al siguiente en el ciclo. Todos estos
estados son guardados y recuperados a través del método restore(), que recupera
el estado previamente guardado en canvas. Para esta función queremos que la
grilla se cargue al momento de iniciar la página, por tanto inicializamos la función
en el archivo js.

En el Ejemplo, se muestra el dibujo de uno de los elementos básicos, la línea. En

este ejemplo el dibujo de la línea se logra partiendo de un punto a otro, y esta es
quizás la principal desventaja de canvas, ya que sus métodos nativos no ofrecen
mucha ayuda al momento de dibujar, y es necesario trazar tantos puntos como
sea posible cuando se requiere dibujar diferentes formas. Vamos a ejemplificar
esto a través del Ejemplo, dibujaremos dos figuras haciendo uso de otro de los
métodos de canvas fill(). Antes de comenzar el ejemplo describiremos los métodos
a utilizar:

 fill(): Este método dibuja una figura rellena.

 fillRect(): Este método dibuja un rectángulo relleno.
 fillStyle(): Metodo que da el color al relleno de la figura.
 strokeRect(): Dibuja el contorno de un rectángulo.
 clearRect(): Borra un área especificada.
 function dibujarFormas()
{
contexto.beginPath();
/*fill*/
contexto.fillStyle = '#B20000';
contexto.fillRect(20,20,100,100);
contexto.clearRect(30,30,50,50);
/*stroke*/
contexto.lineWidth = 2.0;
contexto.strokeStyle = '#B20000';
contexto.strokeRect(150,20,100,100);
}
dibujarFormas();

Para dibujar la forma ya sea si se emplea stroke() o fill(), en cualquiera de los

casos se especifica la posición en x e y, y el tamaño en pixeles del trazo a lo
ancho y alto del canvas.

En el Ejemplo, se hizo la demostración de los métodos strokeRect() y fillRect(), sin

embargo estos métodos solo nos sirven para dibujar figuras rectas como
rectángulos y cuadrados.
¿Qué sucede entonces con las curvas? Canvas emplea el método arc(), para
dibujar un arco o un circulo dependiendo de las propiedades asignadas arc(x, y,
radio, ángulo inicio, ángulo final, dirección):
 La posición x/y: Como todas las figuras, establece la posición donde se
dibujara el arco.
 El radio: Es el tamaño asignado al radio del arco o el circulo.
 El angulo inicio: Es el angulo de partida de la curva en radianes.
 El angulo final: Angulo final del trazo en radianes.
 La dirección: Es un atributo booleano(verdadero o falso) para indicar la
dirección a favor o en contra de las agujas del reloj.
La función Math.PI.
En el canvas para trabajar con ángulos, utilizamos radianes. Un circulo completo
tiene 2π radianes, con lo cual podemos escribir: 360° = 2π rad.
En JavaScript esto se logra atraves del método Math.PI; veamos el Ejemplo:
function dibuarArcos()
{

contexto.beginPath();
contexto.strokeStyle = '#B20000';
contexto.lineWidth = 5.0;
//arco
contexto.arc(200, 200, 40, (Math.PI/180)*0, (Math.PI/180)*180, false);
contexto.stroke();

}
dibuarArcos();
…
//circulo
contexto.fillStyle = '#B20000';
contexto.arc(400, 200, 45, 2*Math.PI, false);
contexto.stroke();
Otro método que canvas incluye para trabajar con curvas, son
quadraticCurveTo(cpx, cpy, x, y) y, bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
que generan curvas Bezier cuadráticas y cubicas respectivamente.
La definición de una curva Bezier cuadrática especifica los atributos cpx y cpy que
son los que indican el punto que dara forma a la curva. Veamos el Ejemplo:
function curvaCuadratica()
{
contexto.beginPath();
contexto.strokeStyle = 'red';
contexto.lineWidth = 5.0;
contexto.moveTo(50,50);
contexto.quadraticCurveTo(100,125, 50, 200);
contexto.stroke();
}
curvaCuadratica();

function curvaBezier()
{
contexto.beginPath();
contexto.strokeStyle = 'red';
contexto.lineWidth = 5.0;
contexto.moveTo(50,50);
contexto.moveTo(250,50);
contexto.bezierCurveTo(200,125, 300,125, 250,200);
contexto.stroke();
 }
curvaBezier();

Otro método interesante que ofrece canvas es el texto, que podemos personalizar
en el lienzo utilizando las propiedades que ofrece; los métodos que canvas ofrece
para dibujar texto son los siguientes:
 strokeText(texto, x, y) Del mismo modo que el método stroke() para el
trazado, este método dibujará el texto especificado en la posición x,y como
una figura vacía (solo los contornos). Puede también incluir un cuarto valor
para declarar el tamaño máximo. Si el texto es más extenso que este último
valor, será encogido para caber dentro del espacio establecido.
 fillText(texto, x, y) Este método es similar al método anterior excepto que
esta vez el texto dibujado será sólido (igual que la función para el trazado).
Y las propiedades para personalizar y darle estilo al texto son las siguientes:
 font: Esta propiedad tiene una sintaxis similar a la propiedad font de CSS, y
acepta los mismos valores.
 textAlign: Esta propiedad alinea el texto. Existen varios valores posibles:
start (comienzo), end (final), left (izquierda), right (derecha) y center
(centro).
 textBaseline: Esta propiedad es para alineamiento vertical. Establece
diferentes posiciones para el texto (incluyendo texto Unicode). Los posibles
valores son: top, hanging, middle, alphabetic, ideographic y bottom.
Veamos el dibujo en el canvas con el clásico “HOLA MUNDO”, en el Ejemplo.

Hasta ahora hemos visto cada uno de los métodos de dibujo utilizando un solo tipo
de línea, pero, canvas también ofrece la posibilidad de darle un estilo a las líneas
que dibujamos. Estos estilos se logran utilizando los siguientes etodos:
 lineWidht(); Este método se ha empleado anteriormente, y sirve para
cambiar el grosor de la línea.
 lineCap(): Esta propiedad determina la forma de la terminación de la línea.
Puede recibir uno de estos tres valores: butt, round y square.
 lineJoin(): Que determina la forma de coexion entre líneas y puede ser
round, bevel y miter.
 MiterLimit(): Junto al lineJoin, determina cuánto la conexión de dos líneas
será extendida cuando la propiedad lineJoin es declarada con el valor miter.
 shadowBlur(): Determina cuanto se extiende la sombra de una figura, entre
mas alto el valor mas extensa será la sombra, el valor debe ser un valor
doble positivo, no infinito. El valor predeterminado es 0.
 shadowColor: Especifica el color que el navegador usa para dibujar
sombras. El valor de esta propiedad se especifica a menudo como
parcialmente transparente para mostrar el fondo.
 shadowOffsetX(): Especifica el desplazamiento horizontal, en píxeles de la
pantalla, para las sombras.
 shadowOffsetY(): Especifica el desplazamiento vertical, en píxeles de la
pantalla, para las sombras.
 textAlign():