CanvasRenderingContext2D: strokeRect()-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.strokeRect()-Methode der Canvas 2D API zeichnet ein Rechteck, das gemäß dem aktuellen strokeStyle und anderen Kontexteinstellungen umrandet (konturiert) wird.

Diese Methode zeichnet direkt auf die Zeichenfläche, ohne den aktuellen Pfad zu ändern, sodass nachfolgende Aufrufe von fill() oder stroke() keinen Einfluss darauf haben.

Syntax

strokeRect(x, y, width, height)

Die strokeRect()-Methode zeichnet ein konturiertes Rechteck, dessen Startpunkt bei (x, y) liegt und dessen Größe durch width und height festgelegt ist.

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 gehen nach rechts und negative nach links.
height: Die Höhe des Rechtecks. Positive Werte gehen nach unten und negative nach oben.

HTML

html

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

JavaScript

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);

Ergebnis

Anwenden verschiedener Kontexteinstellungen

Dieses Beispiel zeichnet ein Rechteck mit einem Schlagschatten und dicken, abgeschrägten Umrissen.

HTML

html

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

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "#dd5533";
ctx.shadowBlur = 20;
ctx.lineJoin = "bevel";
ctx.lineWidth = 15;
ctx.strokeStyle = "#3388ff";
ctx.strokeRect(30, 30, 160, 90);