Dibujar con el elemento canvas HTML5

Una de las novedades más interesantes que ofrece HTML5 es el elemento canvas, canvas viene a solucionar una carencia que ha tenido el diseño en la web con HTML 4.01, como es el hecho de poder aplicar dibujos como líneas, circulos, triángulos ... crear representaciones o diseños desde el propio DOM HTML.

El funcionamiento de canvas está ligado a javascript, canvas es un contenedor que acepta argumentos a través del método "getContext" y sus propiedades en Javascript.

Si tu navegador no acepta canvas, te aparecerá un mensaje de no compatible.

El ejemplo también tiene el script modernizr para controlar si canvas es compatible o no.

Una etiqueta básica de canvas ...

<canvas id="mi_dibujo" style="width: 200px; height: 200px; border: 1px solid #000000;"></canvas>

¿Cómo acceder al elemento canvas a través de javascript?

Código del ejemplo explicativo ...

//Primero obtenemos el id del elemento canvas
dibujo = document.getElementById("mi_dibujo");

//Se crea la instancia para el objeto canvas
a_dibujar = dibujo.getContext("2d");

//Ahora colocamos un fondo gradiente para ir agregando las capas
//createLinearGradient(x, y, width, height);
gradiente=a_dibujar.createLinearGradient(0,0,300,150);
gradiente.addColorStop(0,"#000000");
gradiente.addColorStop(1,"#FFFFFF");
a_dibujar.fillStyle=gradiente;
//fillRect(coordenada x, coordenada y, width, height)
a_dibujar.fillRect(0,0,300,150);

//Se añade otra capa superior con gradiente
gradiente=a_dibujar.createLinearGradient(0,0,300,150);
gradiente.addColorStop(0,"#383942");
gradiente.addColorStop(1,"#FFFFFF");
a_dibujar.fillStyle=gradiente;
//fillRect(coordenada x, coordenada y, width, height)
a_dibujar.fillRect(50, 25, 200, 100);

//Agregamos una línea
//moveTo(x, y);
a_dibujar.moveTo(0, 0);
//Se define el punto final de la línea
//lineTo(x, y);
a_dibujar.lineTo(400, 200);
a_dibujar.stroke();

//Agregamos otra línea
//moveTo(x, y);
a_dibujar.moveTo(300, 0);
//Se define el punto final de la línea
//lineTo(x, y);
a_dibujar.lineTo(0, 150);
a_dibujar.stroke();

//Agregamos un círculo
a_dibujar.beginPath();
//arc(x, y, radio, start, stop);
a_dibujar.arc(150,75,50,0,2*Math.PI);
a_dibujar.stroke();

//Agregamos texto
a_dibujar.font="30px trebuchet";
//color del texto
a_dibujar.fillStyle="#515273";
//filltext(string, x, y) -> añade texto normal
//strokeText(string, x, y) -> añade efecto stroke
a_dibujar.fillText("Dibujar con CANVAS",15,85);


Para que el ejemplo funcione pega estas etiquetas en el head ...

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script> 
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Código del ejemplo ...

Javascript pegar en el head ... 
Javascript pegar este código al final del documento HTML antes de la etiqueta de cierre body ... 
HTML ...