CanvasRenderingContext2D.fillRect() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.fillRect(x, y, width, height)

Beschreibung

fillRect() zeichnet ein gefülltes Rechteck direkt auf die Zeichenfläche. Die obere linke Ecke liegt bei (x, y), die Größe ergibt sich aus width und height. Die Füllung richtet sich nach dem aktuellen fillStyle. Das kann eine Farbe, ein CanvasGradient oder ein CanvasPattern sein.

Anders als rect() verändert fillRect() den aktuellen Pfad nicht. Die Methode zeichnet sofort und braucht weder beginPath() noch fill(). Deshalb eignet sie sich gut für Hintergründe, Balkendiagramme, Pixelraster, Spielfelder und zum Übermalen der Fläche zwischen zwei Animationsbildern.

Die Koordinaten werden durch die aktuelle Transformationsmatrix umgerechnet (translate(), rotate(), scale()). Außerdem wirken globalAlpha, globalCompositeOperation, Schatten (shadowColor, shadowBlur …), filter und ein aktiver Beschneidungsbereich (clip()).

Parameter

Name	Typ	Beschreibung
$x Pflicht	number	x-Koordinate des Startpunkts (normalerweise die linke Kante) im Canvas-Koordinatensystem.
$y Pflicht	number	y-Koordinate des Startpunkts (normalerweise die obere Kante).
$width Pflicht	number	Breite des Rechtecks. Bei negativen Werten wird nach links gezeichnet.
$height Pflicht	number	Höhe des Rechtecks. Bei negativen Werten wird nach oben gezeichnet.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Einfaches farbiges Rechteck

const canvas = document.querySelector('#leinwand');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#2a9d8f';
ctx.fillRect(20, 20, 150, 100); // x, y, Breite, Höhe

Hintergrund füllen und Balkendiagramm zeichnen

const ctx = document.querySelector('#chart').getContext('2d');
const { width, height } = ctx.canvas;
const werte = [40, 85, 60, 120, 95];

// Hintergrund
ctx.fillStyle = '#f4f4f4';
ctx.fillRect(0, 0, width, height);

// Balken von unten nach oben (negative Höhe)
const balkenBreite = 30;
werte.forEach((wert, i) => {
  ctx.fillStyle = wert > 90 ? '#e76f51' : '#264653';
  ctx.fillRect(20 + i * (balkenBreite + 10), height - 10, balkenBreite, -wert);
});

Farbverlauf und Transparenz

const ctx = document.querySelector('#leinwand').getContext('2d');

const verlauf = ctx.createLinearGradient(0, 0, 200, 0);
verlauf.addColorStop(0, 'gold');
verlauf.addColorStop(1, 'crimson');

ctx.fillStyle = verlauf;
ctx.fillRect(10, 10, 200, 80);

ctx.globalAlpha = 0.5;
ctx.fillStyle = 'navy';
ctx.fillRect(60, 40, 200, 80); // halbtransparent überlappend
ctx.globalAlpha = 1;

Animationsschleife mit Überdecken des vorigen Bildes

const ctx = document.querySelector('#spiel').getContext('2d');
let x = 0;

const zeichne = () => {
  // Hintergrund übermalen (Alternative zu clearRect)
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  ctx.fillStyle = 'lime';
  ctx.fillRect(x, 50, 20, 20);
  x = (x + 2) % ctx.canvas.width;
  requestAnimationFrame(zeichne);
};
requestAnimationFrame(zeichne);

// Wichtig · Fallstricke

Kein Einfluss auf den Pfad: Ein anschließendes fill() oder stroke() zeichnet das Rechteck nicht noch einmal. Wenn du das Rechteck als Teil eines Pfads brauchst, verwende rect().
Unschärfe: Kanten auf nicht ganzzahligen Koordinaten werden geglättet (Antialiasing) und wirken dadurch verschwommen. Runde die Werte bei Bedarf mit Math.round().
HiDPI-Bildschirme: Wenn canvas.width und canvas.height nicht mit devicePixelRatio multipliziert werden, wirkt die Ausgabe auf Retina-Bildschirmen unscharf. Setze die Canvas-Größe entsprechend und verwende ctx.scale(dpr, dpr).
Ist width oder height gleich 0, wird nichts gezeichnet. Enthält ein Argument NaN oder Infinity, bricht der Aufruf stillschweigend ab, ohne einen Fehler zu werfen.
fillRect() mit deckender Farbe übermalt die Fläche. clearRect() dagegen macht sie transparent. Bei Canvas-Elementen über anderem Inhalt ist das ein wichtiger Unterschied.
Die Methode ist in allen Browsern verfügbar, auch in OffscreenCanvasRenderingContext2D innerhalb von Web Workern.

Siehe auch

CanvasRenderingContext2D.strokeRect() CanvasRenderingContext2D.clearRect() CanvasRenderingContext2D.rect() CanvasRenderingContext2D.fillStyle CanvasRenderingContext2D.fill() CanvasRenderingContext2D CanvasRenderingContext2D.ellipse()