Canvas - una introducción

facebook-svg gplus-svg twitter-svg

La etiqueta <canvas> se utiliza para dibujar gráficos. Cualquier texto dentro de este elemento se mostrará solo en los navegadores que no soportan <canvas>.
El canvas cuenta con varias métodos() y propiedades. A continuación algunas de ellas.

JavaScript Descripción Defecto
width canvas.width Determina (sets) o devuelve (returns) la anchura del canvas 300
height canvas.height Determina (sets) o devuelve (returns) la altura del canvas 150
getContext() canvas.getContext("2d"); Devuelve un objeto que proporciona todos los métodos y propiedades para dibujar en el canvas.  
toDataURL() canvas.toDataURL(tipo); Convierte el contenido del canvas en una imágen - data:uri. El parámetro entre paréntesis indica el tipo de imágen. image/png

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

Su navegador no soporta canvas :( 

Sin embargo, el elemento <canvas> no tiene habilidad de dibujo en sí mismo, siendo sólo un contenedor para gráficos. Por esto es importante que el <canvas> tenga asignado un id, ya que habrá que manipularlo a través de JavaScript. Utilizaremos document.getElementById para encontrar el canvas.

El método getContext() devuelve un objeto ( puede llamar este objeto como quiera; a continuación lo llamaremos ctx ) que proporciona métodos() y propiedades para dibujar en el canvas.


window.onload = function() {
	// encuentre el canvas para dibujar.
	var canvas = document.getElementById("Canvas1");
	 // si existe el canvas y si tiene el método getContext
		if (canvas && canvas.getContext) {
		// utilice el método getContext para recuperar el contexto del canvas
		var ctx = canvas.getContext("2d");
		// y si tenemos contexto
			if (ctx) {
			// dibujamos
			}
		}
}

El sistema de coordenadas

Para dibujar necesitaremos saber las coordenadas x e y de los puntos utilizados. Por ejemplo el código para dibujar un rectángulo es rect(x,y,w,h), donde x e y son las coordenadas de la esquina izquierda arriba, w es la anchura y h es la altura del rectángulo.
En el <canvas>:
- El punto cuyas coordenadas son: x=0; y=0; se corresponde con la esquina izquerda arriba del canvas.
- Abajo en la esquina derecha x=canvas.width; y=canvas.height;.

Pase el ratón sobre el siguiente <canvas> para ver sus coordenadas x e y:

Su navegador no soporta canvas :(

Pase por encima del canvas para obtener la posición actual del ratón.