Linea de Codigo

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 height="300px" width="300px" id="micanvas">
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 200x200 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.