Ya hemos visto como podemos dibujar una línea en un Canvas con HTML5, ahora vamos a dibujar un rectángulo dentro del 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.
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 ctx = canvas.getContext("2d");
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:
ctx.fillRect(10,10,200,200);
En este caso hemos creado un rectángulo de 200×200 que se dibuja desde la coordenada 10,10.
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:
ctx.fillStyle="#f00";
Ya tenemos dibujado nuestro rectángulo en rojo dentro del Canvas de HTML5.
