Dibujar un rectángulo en un Canvas con HTML5

Ya hemos visto como podemos dibujar una línea en un Canvas con HTML5, ahora vamos a dibujar un rectángulo dentro del Canvas.

Crear el elemento Canvas

Lo primero como cualquier código que vaya a manejar el Canvas con HTML5 será el crear el elemento Canvas dentro de la página. Para ello utilizamos el elemento canvas.

<canvas id="micanvas" width="300" height="300">
  Tu navegador no soporta Canvas
</canvas>

Obtener la referencia al Canvas

Ahora ya pasamos al generar el código Javascript que accede al canvas. En este caso hay que obtener la referencia al canvas. Para ello utilizamos los métodos .getElementById y .getContext. El primero es bastante conocido (si no te es familiar revisa la información del getElementById) y el segundo nos permite acceder al lienzo del canvas, sobre el cual vamos a dibujar un rectángulo con HTML5.

var canvas = document.getElementById('micanvas');
var contexto = canvas.getContext('2d');

Dibujar el rectángulo con fillRect

Para dibujar un rectángulo vamos a utilizar el método .fillRect. Sus parámetros son muy sencillos. Son 4 valores, los dos primeros representan la esquina superior izquierda. Es decir, de dónde parte el dibujo del rectángulo. Los dos siguientes representan el ancho y el alto del rectángulo, respectivamente.

El código sería el siguiente:

contexto.fillRect(10, 10, 200, 200);

En este caso hemos creado un rectángulo de 200x200 que se dibuja desde la coordenada 10,10.

Cambiar el color del rectángulo

Si queremos, podemos cambiar el color del rectángulo. Para ello tenemos a nuestra disposición la propiedad .fillStyle. A dicho método le pasaremos el valor en RGB del color que queramos utilizar. Por ejemplo, para poner el rectángulo en rojo, escribiremos lo siguiente:

var canvas = document.getElementById('micanvas');
var contexto = canvas.getContext('2d');

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

Ya tenemos dibujado nuestro rectángulo en rojo dentro del Canvas de HTML5.