CanvasRenderingContext2D.fillRect()
El método CanvasRenderingContext2D.fillRect() de la API Canvas 2D dibuja un rectángulo relleno en la posición ( x, y ). El tamaño del rectángulo se determina por width (anchura) y height (altura). El estilo de relleno se determina por el atributo fillStyle.
Sintaxis
void ctx.fillRect(x, y, width, height);
Parámetros
x- La componente x de la coordenada para el punto de comienzo del rectángulo.
y- La componente y de la coordenada para el punto de comienzo del rectángulo.
width- La anchura del rectángulo.
height- La altura del rectángulo.
Ejemplos
Usando el método fillRect
El siguiente fragmento de código usa el método fillRect.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
// Rellenar el canvas completo
// ctx.fillRect(0, 0, canvas.width, canvas.height);
Edita el código que se encuentra a continuación y observa en vivo los cambios actualizados en el canvas:
Especificaciones
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard La definición de 'CanvasRenderingContext2D.fillRect' en esta especificación. |
Living Standard |
Compatibilidad del navegador
BCD tables only load in the browser