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 entsprechend dem aktuellen strokeStyle und anderen Kontexteinstellungen umrandet (gestrokt) ist.

Diese Methode zeichnet direkt auf das Canvas, ohne den aktuellen Pfad zu ändern. Daher haben nachfolgende Aufrufe von fill() oder stroke() keinen Einfluss darauf.

Syntax

strokeRect(x, y, width, height)

Die strokeRect()-Methode zeichnet ein gestroktes Rechteck, dessen Startpunkt bei (x, y) liegt und dessen Größe durch width und height angegeben 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 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 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

Anwendung 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);