Crear un Canvas en HTML5

Introducción al Canvas

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,…

Crear el elemento CANVAS

Para crear un canvas en HTML5 tenemos que utilizar el elemento CANVAS.

<canvas></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.

<canvas id="micanvas" width="200" height="200"></canvas>

En el caso de que no indiquemos las dimensiones, estas serán de 300x150.

Obtener la referencia del Canvas

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');

Crear el contexto de renderizado

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 contexto = canvas.getContext('2d');

Dibujar gráficos en el Canvas

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 contexto = canvas.getContext('2d');

contexto.fillStyle = 'rgb(255, 0, 0)';
contexto.fillRect(10, 10, 50, 50);

contexto.fillStyle = 'rgb(0, 255, 0)';
contexto.fillRect(70, 70, 50, 50);