CanvasRenderingContext2D: rect()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die CanvasRenderingContext2D.rect() Methode der Canvas 2D API fügt dem aktuellen Pfad ein Rechteck hinzu.

Wie andere Methoden, die den aktuellen Pfad ändern, rendert diese Methode direkt nichts. Um das Rechteck auf eine Leinwand zu zeichnen, können Sie die fill() oder stroke() Methoden verwenden.

Hinweis: Um ein Rechteck in einem Schritt zu erstellen und zu rendern, verwenden Sie die fillRect() oder strokeRect() Methoden.

Syntax

rect(x, y, width, height)

Die rect()-Methode erstellt einen rechteckigen Pfad, dessen Startpunkt bei (x, y) liegt und dessen Größe durch width und height angegeben wird.

Parameter

x: Die x-Achsen-Koordinate des Startpunkts des Rechtecks.
y: Die y-Achsen-Koordinate des Startpunkts des Rechtecks.
width: Die Breite des Rechtecks. Positive Werte sind nach rechts, negative nach links.
height: Die Höhe des Rechtecks. Positive Werte sind nach unten, negative nach oben.

HTML

html

<canvas id="canvas"></canvas>

JavaScript

Die Ecke des Rechtecks befindet sich bei (10, 20). Es hat eine Breite von 150 und eine Höhe von 100.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // Start a new path
ctx.rect(10, 20, 150, 100); // Add a rectangle to the current path
ctx.fill(); // Render the path