Cómo dibujar rectángulos

En canvas podemos dibujar rectángulos vacios (solo el contorno sin relleno) o con un relleno: de color uniforme o degradado. En la unidad del canvas en detalle tienes el proceso genérico para dibujar en el canvas.

<canvas width="600" height="300" id="mipanel"></canvas>

<script> 

   var miLienzo = document.getElementById("mipanel");

   var lapiz = miLienzo.getContext("2d");

   lapiz.rect(5,5,200,100);

   lapiz.stroke();

</script>

Prueba este código

Dibuja un rectángulo con la esquina superior izquierda en el punto (5,5) con 200 pixels de ancho y 100 de alto. Como ves el proceso es el de siempre:

Preparar el papel,
Crear el lápiz
Crear la figura (rectángulo)
Ddibujar, o sea, pasarlo al papel (el canvas).

En algunas figuras el paso 3 y 4 se unifican, como en este ejemplo:

<canvas width="600" height="300" id="mipanel"></canvas>

<script> 

	var miLienzo = document.getElementById("mipanel");

	var lapiz = miLienzo.getContext("2d");

	lapiz.strokeRect(5,5,200,100);

</script>

Prueba este código

El proceso de dibujar en el canvas es muy natural: preparar el papel, definir lo que vas a dibujar y dibujarlo.

Rectángulo con relleno uniforme

Cualquier contorno cerrado se puede rellenar con un color, pero los rectángulos tienen además un método propio para esta operación.

<canvas width="600" height="300" id="mipanel"></canvas>

<script> 

	var miLienzo = document.getElementById("mipanel");

	var lapiz = miLienzo.getContext("2d");

	lapiz.fillStyle="red";

	lapiz.fillRect(5,5,200,100);

</script>

Prueba este código

En este caso se ha usado una propiedad del objeto lapiz para poner el color de relleno en rojo (red). También se pueden usar los códigos de color hexadecimales, en este caso sería #FF0000 (rojo=255, verde=0, azul=0). Si quieres ver más sobre como codificar colores mira el apartado de formateo de caracteres del tutor html

Los rectágnulos tienen un método específico para rellenarse.