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. cmo ves el proceso es el de siempre: preparar el papel, crear el lápiz y dibujar. El dibujo se hac een dos pasos: primero se crea el rectángulo y luego se dibuja.

En esta otra opción el rectángulo se dibuja directamente, en un solo paso:

<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

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