Cómo dibujar rectángulos en Canvas

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>

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:

1. Preparar el papel,
2. Crear el lápiz
3. Crear la figura (rectángulo)
4. Dibujar, 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>