CanvasRenderingContext2D.fillRect()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
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 # dom-context-2d-fillrect-dev |
Compatibilidad con navegadores
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fillRect |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support