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.

void ctx.fillRect(x, y, width, height);

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.

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:

• The interface defining it, CanvasRenderingContext2D
• CanvasRenderingContext2D.fillStyle
• CanvasRenderingContext2D.clearRect()
• CanvasRenderingContext2D.strokeRect()