--- title: CanvasRenderingContext2D.strokeRect() slug: Web/API/CanvasRenderingContext2D/strokeRect tags: - API - Canvas - CanvasRenderingContext2D - Method - Reference translation_of: Web/API/CanvasRenderingContext2D/strokeRect ---
{{APIRef}}

Canvas 2D API の CanvasRenderingContext2D.strokeRect() メソッドは、矩形の輪郭を現在の {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} とその他のコンテキスト設定によって描画します。

このメソッドは、現在のパスを変更せずキャンバスに直接描画するため、 その後の {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} または {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} の呼び出しには影響を与えません。

構文

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

strokeRect() は、座標 (x, y) を始点とする大きさ (width, height) の矩形の輪郭を描画します。

パラメーター

x
矩形の始点となる x 座標。
y
矩形の始点となる y 座標。
width
矩形の幅。正の値で右方向、負の値で左方向に描画します。
height
矩形の高さ。正の値で下方向、負の値で上方向に描画します。

例

矩形の輪郭

この例では、 strokeRect() により矩形を緑色の輪郭で描画します。

HTML

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

JavaScript

以下に示される矩形の左上角の座標は (20, 10) です。幅は 160 で、高さは 100 です。

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

実行結果

{{ EmbedLiveSample('矩形の輪郭', 700, 180) }}

様々なコンテキスト設定の適用

この例では、面取りされた太い線の矩形を影付きで描画します。

HTML

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

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.shadowColor = '#d53';
ctx.shadowBlur = 20;
ctx.lineJoin = 'bevel';
ctx.lineWidth = 15;
ctx.strokeStyle = '#38f';
ctx.strokeRect(30, 30, 160, 90);

実行結果

{{ EmbedLiveSample('様々なコンテキスト設定の適用', 700, 180) }}

仕様

仕様書 策定状況 コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} {{Spec2('HTML WHATWG')}}  

ブラウザー実装状況

{{Compat("api.CanvasRenderingContext2D.strokeRect")}}

関連情報