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 |
---|
HTML Standard # dom-context-2d-fillrect-dev |
Compatibilidad con navegadores
BCD tables only load in the browser