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.

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:

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

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

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

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

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

</script>

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.

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

Rectángulos con esquinas redondeadas

También esposible dibujar rectángulos con esquinas redondeadas de manera muy sencilla, usamos para eso el método roundRect(), con esta función nos ahorramos tener que escribir bastante código.

La sintáxis de uso es bastante simple:

ctx.roundRect(x, y, width, height, radii);

Como en los otros métodos de dibujo de rectángulos damos como argumentos las coordenadas de inicio, ancho y el alto, y le añadimos un argumento para el radio de las esquinas.

El radio se especifica de una forma parecida al CSS, es decir no tiene que ser un radio único. Si este argumento es un número ese valor se usa para las cuatro esquinas, pero se puede usar un array con hasta cuatro valores, uno para cada esquina en el orden habitual: superior izquierda, superior derecha, inferior derecha e inferior izquierda. Similar a CSS, incluso se puede areviar dando valores por pares.

Un ejemplo sencillo:

<body>

const canvas = document.getElementById('miCanvas');

const ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';

ctx.roundRect(10, 10, 100, 100, 20);

ctx.fill();

ctx.roundRect(150, 10, 100, 100, [20, 0, 20, 0]);

ctx.fill();

ctx.roundRect(10, 150, 100, 100, [0, 20, 0, 20]);

ctx.fill();

ctx.roundRect(150, 150, 100, 100, 50);

ctx.fill();

</script>

</body>

Como ves es posible incluso dibujar un círculo con el método roundRect. Eneste ejemplo se ha usado un rectágnulo relleno, pero es igualmente posible dibujar solo un contorno:

<body>

const canvas = document.getElementById('miCanvas');

const ctx = canvas.getContext('2d');

ctx.strokeStyle = 'blue';

ctx.lineWidth= 4

ctx.roundRect(10, 10, 100, 100, 20);

ctx.stroke();

ctx.roundRect(150, 10, 100, 100, [20, 0, 20, 0]);

ctx.stroke();

ctx.roundRect(10, 150, 100, 100, [0, 20, 0, 20]);

ctx.stroke();

ctx.roundRect(150, 150, 100, 100, 50);

ctx.stroke();

</script>

</body>