Canvas - una introducción

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.

<canvas id="Canvas1" width="250" height="220">Su navegador no soporta canvas :( </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:

x: 189, y: 142

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