El canvas es un elemento que aparece nuevo en HTML5 y que nos permitirá la gestión de gráficos. Así podremos dibujar gráficos, crear foto composiciones, realizar animaciones,…
Para crear un canvas en HTML5 tenemos que utilizar el elemento CANVAS.
A un elemento CANVAS podemos darle un alto y ancho mediante los atributos height y width respectivamente. Así como darle un identificador mediante el atributo id.
En el caso de que no indiquemos las dimesiones, estas serán de 300×150.
Una vez que tenemos nuestro «lienzo» vamos a dibujar algún gráfico. Para ello utilizaremos el lenguaje Javascript. Así lo primero que haremos será obtener la referencia sobre el CANVAS mediante un getElementById().
var canvas = document.getElementById("micanvas");
Dentro de un CANVAS podemos volcar varios contextos. Lo que son conocidos como contextos de renderizado. Así podremos tener contextos 2D y 3D. Estos últimos todavía en fase experimental. El método .getContext() sobre el CANVAS nos permitirá crear un nuevo contexto.
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
Ahora ya pasaremos a dibujar gráficos. Así, con el manejo de una propiedad: .fillStyle y un método .fillRect() podemos crear rectángulos de colores. En el caso de .fillStyle recibe como parámetro un color definido en formato RGB y en el caso de .fillRect() las coordenadas de los vertices superior izquierdo, así como el alto y ancho.
Así nos quedará el código que insertará gráficos al crear nuestro primer canvas con HTML5.
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(20,20,100,100);
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(60,60,140,140);
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(100,100,180,180);
