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.
<canvas id="micanvas" width="300px" height="300px"> Su navegador no soporta en elemento CANVAS</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.
