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 |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.fillRect' in that specification. |
Living Standard |
Compatibilidad del navegador
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Característica | Android | Chrome para Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Soporte básico | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |