recursal/MDN huggingface dataset:
Attr: prefix プロパティ
==================

**`prefix`** は `Attr` インターフェイスの読み取り専用プロパティで、この属性の名前空間接頭辞を返します。接頭辞が指定されていなければ `null` を返します。

接頭辞は、属性が作成されたときの大文字小文字に関わらず、常に小文字になります。

**メモ:** XML だけが名前空間に対応しています。 HTML は対応していません。つまり、 HTML 要素の属性の接頭辞は常に `null` になります。

また、`xml` （`xml:lang` 属性）、`xlink` （`xlink:href`, `xlink:show`, `xlink:target`, `xlink:title` 属性）、 `xpath` 名前空間だけに、 SVG と MathML 要素でのみ対応しています。

値
-

その属性が属する名前空間の接頭辞が入った文字列です。もしない場合は `null` を返します。

例
-

### HTML コンテンツ


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>Show value for &lt;svg&gt;</button>
  <button>Show value for &lt;label&gt;</button>
</p>

<p>
  Prefix of the attribute <code>xml:lang</code>:
  <output id="result">None.</output>
</p>
```

### JavaScript コンテンツ


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.prefix;
  });
  i++;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-attr-prefix |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Attr.name` プロパティはこの属性の修飾名を返し、 `Attr.localName` プロパティはこの属性の修飾名のローカル名の部分を返します。
* `Element.prefix()` プロパティは `Element` の名前空間接頭辞を返します。
LockManager: query() メソッド
=========================

`LockManager` インターフェイスの **`query()`** メソッドは、確保中のロックと獲得待ち中のロックに関する情報を持ったオブジェクトで解決する `Promise` を返します。

構文
--


```js
query()
```

### 引数

なし

### 返値

`LockManager` の状態のスナップショットを持ったオブジェクトで解決する `Promise` を返します。このオブジェクトは以下のプロパティを持ちます。

* `held`: 確保中のロックに関する `LockInfo` オブジェクトの配列です。
* `pending`: 獲得待ち中のロックに関する `LockInfo` オブジェクトの配列です。
### 例外

このメソッドは、以下のいずれかの種類の `DOMException` で拒否される `Promise` を返す可能性があります。

`InvalidStateError` `DOMException`

ドキュメントが完全にアクティブでない環境のとき投げられます。

`SecurityError` `DOMException`

現在の環境でロックマネージャーが取得できないとき投げられます。

例
-


```js
const state = await navigator.locks.query();
for (const lock of state.held) {
  console.log(`確保中のロック: 名前 ${lock.name}, モード ${lock.mode}`);
}
for (const request of state.pending) {
  console.log(`要求中のロック: 名前 ${request.name}, モード ${request.mode}`);
}
```

仕様書
---

| Specification |
| --- |
| Web Locks API # api-lock-manager-query |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CanvasRenderingContext2D.moveTo()
=================================

**`CanvasRenderingContext2D.moveTo()`** はキャンバス 2D API のメソッドで、新しいサブパスの始点を `(x, y)` 座標に移動します。

構文
--


```js
void ctx.moveTo(x, y);
```

### 引数

`x`

点の x (水平) 座標。

`y`

点の y (鉛直) 座標。

例
-

### 複数のサブパスの作成

この例は、`moveTo()` を使用して、1 つのパス内に 2 つのサブパスを作成します。サブパスは両方とも `stroke()` の呼び出し 1 回で、描画することができます。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

最初の線は、 (50, 50) が始点で (200, 50) が終点です。 2 番目の線は、(50, 90) が始点で (280, 120) が終点です。


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50); // 1 つ目のサブパス
ctx.lineTo(200, 50);
ctx.moveTo(50, 90); // 2 つ目のサブパス
ctx.lineTo(280, 120);
ctx.stroke();
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-moveto-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineTo()`
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D.direction
==================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`CanvasRenderingContext2D.direction`** はキャンバス 2D API のプロパティで、テキストを描画する際に使用する現在の書字方向を指定します。

構文
--


```js
ctx.direction = "ltr" || "rtl" || "inherit";
```

### オプション

指定可能な値は下記の通りです。

`"ltr"`

テキストの書字方向を左書き (left-to-right) にします。

`"rtl"`

テキストの書字方向を右書き (right-to-left) にします。

`"inherit"`

テキストの書字方向を `<canvas>` 要素または `Document` から適宜継承します。既定値です。

既定値は `"inherit"` です。

例
-

### 書字方向の変更

この例では、 2 つのテキストを描画しています。最初のものは左から右へ、 2 番目は右から左へ描画します。`ltr` の "Hi!" は `rtl` では "!Hi" になることに注意してください。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.fillText("Hi!", 150, 50);
ctx.direction = "rtl";
ctx.fillText("Hi!", 150, 130);
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-direction-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このメソッドを定義するインターフェイスである `CanvasRenderingContext2D`
CanvasRenderingContext2D: fillText() メソッド
=========================================

`CanvasRenderingContext2D` の **`fillText()`** はキャンバス 2D API のメソッドで、指定した座標にテキスト文字列を描画し、その文字を現在の `fillStyle` で塗りつぶします。オプションの引数で、描画されるテキストの最大幅を指定すると、ユーザーエージェントは、この幅に収まるようにテキストを圧縮したり、フォントサイズを縮小したりします。

このメソッドは現在のパスを変更することなく直接描画を行うため、その後の `fill()` (en-US) や `stroke()` の呼び出しには影響を与えません。

テキストのフォントやレイアウト構成は、 `font`、`textAlign`、`textBaseline`、`direction` の各プロパティで定義されたものを使用して描画が行われます。

**メモ:** 文字列の文字の輪郭を描画するには、そのコンテキストで `strokeText()` メソッドを呼び出してください。

構文
--


```js
fillText(text, x, y)
fillText(text, x, y, maxWidth)
```

### 引数

`text`

文字列で、このコンテキストに描画するテキスト文字列を指定します。テキストは、 `font`、`textAlign`、`textBaseline`、`direction` の設定を使用して描画されます。

`x`

テキストの描画を始める、x 軸の座標をピクセル単位で指定します。

`y`

テキストの描画を始める、y 軸の座標をピクセル単位で指定します。

`maxWidth` 省略可

描画するテキストの最大幅をピクセル数で指定します。指定しなかった場合、テキストの幅は制限されません。この値を指定すると、ユーザーエージェントはカーニングを調整したり、水平方向に縮小されたフォントを選択したり（利用可能であるか、または品質を損なうことなく生成できる場合）、フォントを縮小したりして、指定した幅にテキストを収めます。

### 返値

なし (`undefined`)。

例
-

### 塗りつぶしたテキストを描画

この例では、 "Hello world" という語を `fillText()` メソッドで描画します。

#### HTML

まず、描画するためのキャンバスが必要です。このコードでは、幅 400 ピクセル、横 150 ピクセルのコンテキストを作成します。


```html
<canvas id="canvas" width="400" height="150"></canvas>
```


#### JavaScript

この例の JavaScript コードは次のようになります。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90);
```


このコードでは、 `<canvas>` への参照を取得し、その 2D グラフィックコンテキストへの参照を取得します。

そして、 `font` を高さ 50 ピクセルの "serif" （ユーザーの既定のセリフ付きフォント）に設定し、 `fillText()` を呼び出して座標 (50, 90) からテキスト "Hello world" を描画しています。

#### 結果

### テキストの大きさの制限

この例は "Hello world" という文字列を、 140 ピクセルの幅に制約して描画します。

#### HTML


```html
<canvas id="canvas" width="400" height="150"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90, 140);
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-filltext-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* テキストの描画
* `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.strokeText()`
CanvasRenderingContext2D.drawFocusIfNeeded()
============================================

**`CanvasRenderingContext2D.drawFocusIfNeeded()`** はキャンバス 2D API のメソッドで、引数で与えられた要素にフォーカスが当たった時に、現在のパスもしくは指定されたパスの周りにフォーカスリングを描画します。

構文
--


```js
void ctx.drawFocusIfNeeded(element);
void ctx.drawFocusIfNeeded(path, element);
```

### 引数

element

フォーカスしたかどうかをチェックする要素。

`path`

利用する `Path2D` (en-US) パス。

例
-

### ボタンのフォーカスの管理

この例では、キャンバス上に 2 つのボタンを描画します。 `drawFocusIfNeeded()` メソッドは、必要に応じてフォーカスリングを描画するために使用されます。

#### HTML


```html
<canvas id="canvas">
  <button id="button1">続ける</button>
  <button id="button2">終了</button>
</canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");

document.addEventListener("focus", redraw, true);
document.addEventListener("blur", redraw, true);
canvas.addEventListener("click", handleClick, false);
redraw();

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawButton(button1, 20, 20);
  drawButton(button2, 20, 80);
}

function handleClick(e) {
  // Calculate click coordinates
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;

  // 必要に応じて button1 をフォーカスする
  drawButton(button1, 20, 20);
  if (ctx.isPointInPath(x, y)) {
    button1.focus();
  }

  // 必要に応じて button2 をフォーカスする
  drawButton(button2, 20, 80);
  if (ctx.isPointInPath(x, y)) {
    button2.focus();
  }
}

function drawButton(el, x, y) {
  const active = document.activeElement === el;
  const width = 150;
  const height = 40;

  // ボタンの背景
  ctx.fillStyle = active ? "pink" : "lightgray";
  ctx.fillRect(x, y, width, height);

  // ボタンのテキスト
  ctx.font = "15px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = active ? "blue" : "black";
  ctx.fillText(el.textContent, x + width / 2, y + height / 2);

  // クリック可能な領域を定義
  ctx.beginPath();
  ctx.rect(x, y, width, height);

  // 必要に応じてフォーカスリングを描画
  ctx.drawFocusIfNeeded(el);
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-drawfocusifneeded-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
CanvasRenderingContext2D.rect()
===============================

**`CanvasRenderingContext2D.rect()`** はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。

現在のパスを変更する他のメソッドと同様に、このメソッドも直接何かを描画するわけではありません。 矩形をキャンバスに描画するには、 `fill()` (en-US) または `stroke()` メソッドを使用することができます。

**メモ:** 矩形の作成とレンダリングを一度に行うには、 `fillRect()` または `strokeRect()` メソッドを使用してください。

構文
--


```js
void ctx.rect(x, y, width, height);
```


`rect()` メソッドは、 `(x, y)` を始点とし、 `width` と `height` で大きさを指定した矩形のパスを作成します。

### 引数

`x`

矩形の開始位置の X 座標です。

`y`

矩形の開始位置の Y 座標です。

`width`

矩形の幅です。正の値の場合は右側に、負の値の場合は左側になります。

`height`

矩形の高さです。正の値の場合は下側に、負の値の場合は上側になります。

例
-

### 矩形を描画

この例は、矩形のパスを `rect()` メソッドを使用して生成します。このパスは `fill()` メソッドをし擁して描画されます。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

矩形の角は (10, 20) の位置です。幅は 150 で高さは 100 です。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 20, 150, 100);
ctx.fill();
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-rect-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillRect`
* `CanvasRenderingContext2D.strokeRect()`
* `CanvasRenderingContext2D.fill()` (en-US)
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D.setLineDash()
======================================

**`setLineDash()`** はキャンバス 2D API の `CanvasRenderingContext2D` インターフェイスのメソッドで、線を描画するときに使用される線の模様を設定します。 これは描画する線とその隙間の長さの値を交互に指定する配列を使用します。

**メモ:** 線の模様を実線に戻す場合には、指定する配列の中身を空にします。

構文
--


```js
ctx.setLineDash(segments);
```

### 引数

`segments`

(`Array`) で、描画する線の長さとその隙間の数値を交互に指定する配列 (座標空間単位)。配列内の要素数が奇数の場合、配列の要素がコピーされて連結されます。 例えば、`[5, 15, 25]`は`[5, 15, 25, 5, 15, 25]`になります。配列が空の場合、ラインダッシュリストはリセットされ、描画される線は実線に戻ります。

### 返値

`undefined` です。

例
-

### 基本的な例

この例では、`setLineDash()`メソッドを使用して、実線の上に破線を描画します。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Dashed line
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Solid line
ctx.beginPath();
ctx.setLineDash([]);
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();
```


#### 結果

### いくつかの一般的な模様

この例は、さまざまな一般的な破線のパターンを示しています。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

下記の `drawDashedLine()` 関数を使用すると、複数の破線を簡単に描画できます。引数としてパターン配列を受け取ります。


```js
function drawDashedLine(pattern) {
  ctx.beginPath();
  ctx.setLineDash(pattern);
  ctx.moveTo(0, y);
  ctx.lineTo(300, y);
  ctx.stroke();
  y += 20;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let y = 15;

drawDashedLine([]);
drawDashedLine([1, 1]);
drawDashedLine([10, 10]);
drawDashedLine([20, 5]);
drawDashedLine([15, 3, 3, 3]);
drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
drawDashedLine([12, 3, 3]); // [12, 3, 3, 12, 3, 3] と同じ
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-setlinedash-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.getLineDash()` (en-US)
* `CanvasRenderingContext2D.lineDashOffset` (en-US)
CanvasRenderingContext2D.lineCap
================================

**`CanvasRenderingContext2D.lineCap`** はキャンバス 2D API のプロパティで、描く線の端点の形状を設定します。

**メモ:** 線は `stroke()`、`strokeRect()`、`strokeText()` の各メソッドで描画されます。

構文
--


```js
ctx.lineCap = "butt" || "round" || "square";
```

### オプション

`"butt"`

端点が四角く切られます。既定値です。

`"round"`

端点が丸くなります。

`"square"`

端点は、線の太さと同じ幅、半分の高さのボックスが追加されて四角くなります。

例
-

### 線の先端の形を変える

この例では直線の端点を丸めています。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
```


#### 結果

### 先端形状の比較

次の例では、`lineCap` プロパティがそれぞれ異なる 3 本の線を描画しています。その違いを観察するために、 2 本の補助線を引いています。 3 本の線はそれぞれこの補助線直上を始点および終点として描かれています。

左の線は既定のオプションである `"butt"` の場合の線で、補助線のところで丁度切れています。 2 つ目の`"round"` オプションの場合の線は、補助線の部分の先に半円が追加された格好になっています。右側の`"square"` オプションによる描線は、線の幅と同じ幅で高さが半分の四角形が追加されています。
```

<canvas id="canvas" width="150" height="150"></canvas>
```



```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const lineCap = ["butt", "round", "square"];

// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = "black";
for (let i = 0; i < lineCap.length; i++) {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap[i];
  ctx.beginPath();
  ctx.moveTo(25 + i \* 50, 10);
  ctx.lineTo(25 + i \* 50, 140);
  ctx.stroke();
}
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-linecap-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### WebKit/Blink 特有のメモ

* WebKit および Blink ベースのブラウザーでは、このプロパティに加えて標準外で非推奨のメソッド `ctx.setLineCap()` が実装されています。
関連情報
----

* The interface defining this property: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineWidth` (en-US)
* `CanvasRenderingContext2D.lineJoin` (en-US)
* スタイルと色の適用
CanvasRenderingContext2D.save()
===============================

**`CanvasRenderingContext2D.save()`** はキャンバス 2D API のメソッドで、現在の状態をスタックにプッシュすることで、キャンバス全体の状態を保存します。

### 描画状態

スタックに保存される描画状態には、以下のものが含まれます。

* 現在の変形行列。
* 現在のクリッピング領域。
* 現在の点線リスト。
* `strokeStyle`、 `fillStyle`、`globalAlpha`、`lineWidth` (en-US)、`lineCap`、`lineJoin` (en-US)、`miterLimit` (en-US)、`lineDashOffset` (en-US)、`shadowOffsetX`、`shadowOffsetY`、`shadowBlur`、`shadowColor`、`globalCompositeOperation`、`font`、`textAlign`、`textBaseline`、`direction`、`imageSmoothingEnabled` の現在の値。
構文
--


```js
void ctx.save();
```

例
-

### 描画状態の保存

この例は、`save()` メソッドを使用して既定の状態を保存し、 `restore()` を使用して復元しているため、既定の状態で長方形を描画できます。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 既定の状態を保存
ctx.save();

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

// 既定の状態を復元
ctx.restore();

ctx.fillRect(150, 40, 100, 100);
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-save-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.restore()` (en-US)
CanvasRenderingContext2D: shadowColor プロパティ
===========================================

Canvas 2D API の **`CanvasRenderingContext2D.shadowColor`** プロパティは、影の色を設定します。

描画時の影の不透明度は、塗りつぶしでは `fillStyle` の色の、線の描画では `strokeStyle` の色の影響を受けることを覚えておいてください。

**メモ:** 影はプロパティ `shadowColor` が透明でない色に設定されているときのみ描画されます。さらに、プロパティ `shadowBlur`、`shadowOffsetX`、`shadowOffsetY` のいずれかがゼロでない値に設定されていなければなりません。

値
-

CSS の `<color>` の値として解析される文字列です。デフォルト値は完全に透明な黒です。

例
-

### 図形に影を加える

この例では、2 個の正方形に影を加えます。正方形のうち 1 個は塗りつぶされ、もう 1 個は線で描かれます。`shadowColor` プロパティで影の色を設定し、`shadowOffsetX` と `shadowOffsetY` で影の図形からの相対位置を設定します。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 影
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// 塗りつぶす長方形
ctx.fillRect(20, 20, 100, 100);

// 線で描く長方形
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);
```


#### 結果

### 半透明な図形の影

影の不透明度は (`shadowColor` では完全に不透明な値を設定していても) 親オブジェクトの透明度の影響を受けます。この例では、半透明の色の長方形を線で描き、塗りつぶしを行います。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

塗りつぶす影のアルファ値は `.8 * .2` すなわち `.16` になります。線で描く影のアルファ値は `.8 * .6` すなわち `.48` になります。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 影
ctx.shadowColor = "rgba(255, 0, 0, .8)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;

// 塗りつぶす長方形
ctx.fillStyle = "rgba(0, 255, 0, .2)";
ctx.fillRect(10, 10, 150, 100);

// 線で描く長方形
ctx.lineWidth = 10;
ctx.strokeStyle = "rgba(0, 0, 255, .6)";
ctx.strokeRect(10, 10, 150, 100);
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-shadowcolor-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### WebKit/Blink 固有の注意点

WebKit ベースおよび Blink ベースのブラウザーでは、このプロパティに加え、非標準で非推奨のメソッド `ctx.setShadow()` が実装されています。


```js
setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);
```

関連情報
----

* このプロパティを定義しているインターフェイス: `CanvasRenderingContext2D`
CanvasRenderingContext2D.stroke()
=================================

**`CanvasRenderingContext2D.stroke()`** はキャンバス 2D API のメソッドで、現在のあるいは渡されたパスを、現在の線のスタイルで描画します。

線はパスの中央に配置されます。言い換えれば、線の半分は内側に、半分は外側に描かれます。

線はノンゼロワインディング規則を使用して描かれます。すなわち交差したパスは塗りつぶされます。

構文
--


```js
void ctx.stroke();
void ctx.stroke(path);
```

### 引数

`path`

描画する `Path2D` (en-US) パス。

例
-

### 単純な線の矩形

この例では、 `rect()` メソッドを用いて矩形を作成し、 `stroke()` を用いてキャンバスに描画しています。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.stroke();
```


#### 結果

### パスの再描画

通常、新しく描画するごとに `beginPath()` を呼び出したくなるはずです。そうしないと、以前のサブパスが現在のパスの一部として残り、 `stroke()` メソッドを呼び出すたびに描画されることになります。しかし、場合によっては、これは望ましい効果かもしれません。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

このコードは、 1 つ目のパスを 3 回、 2 つ目のパスを 2 回、 3 つ目のパスを 1 回だけ描画します。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// First sub-path
ctx.lineWidth = 26;
ctx.strokeStyle = "orange";
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();

// Second sub-path
ctx.lineWidth = 14;
ctx.strokeStyle = "green";
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();

// Third sub-path
ctx.lineWidth = 4;
ctx.strokeStyle = "pink";
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();
```


#### 結果

### 線の描画と塗りつぶし

パスの描画と塗りつぶしの両方を行う場合、これらの操作を行う順序によって結果が決まります。この例では、左側の正方形は、描画が塗りつぶしよりも上になるように描かれています。右側の四角は、ストロークよりも塗りつぶしが上に来るように描かれています。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 16;
ctx.strokeStyle = "red";

// Stroke on top of fill
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();

// Fill on top of stroke
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-stroke-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
CanvasRenderingContext2D: fillStyle プロパティ
=========================================

**`CanvasRenderingContext2D.fillStyle`** はキャンバス 2D API のプロパティで、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。既定値は `#000` (黒色)です。

**メモ:** 輪郭と塗りつぶしのスタイル例については、キャンバスのチュートリアルのスタイルと色を適用するをご覧ください。

値
-

以下のいずれかです。

* CSS の `<color>` 値として解釈される文字列。
* `CanvasGradient` オブジェクト（線形または放射状のグラデーション）。
* `CanvasPattern` オブジェクト（繰り返し画像）。
例
-

### 図形の塗りつぶし色を変更する

このサンプルでは青色の塗りつぶし色を矩形に適用します。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
```


#### 結果

### ループを使用した複数の塗りつぶし色の作成

この例では 2 つの `for` ループでそれぞれが異なる塗りつぶし色を持つ四角形のグリッドを描画します。 このためには、 2 つの変数 `i` と `j` を四角形ごとに固有となる RGB 色を生成するために使用し、また赤色と緑色の値だけを変更するようにします (青色は固定値とします) 。チャンネルを変更することによって全ての種類のパターンを生成することができます。
```

<canvas id="canvas" width="150" height="150"></canvas>
```



```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.fillStyle = `rgb(
 ${Math.floor(255 - 42.5 \* i)},
 ${Math.floor(255 - 42.5 \* j)},
 0)`;
    ctx.fillRect(j \* 25, i \* 25, 25, 25);
  }
}
```


結果はこのようになります:

| Screenshot | Live sample |
| --- | --- |
|  |  |

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-fillstyle-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### WebKit/Blink 特有のメモ

WebKit および Blink ベースのブラウザーの場合、このプロパティに加えて、非標準で非推奨のメソッド `ctx.setFillColor()` が実装されています。


```js
setFillColor(color, /\* (optional) \*/ alpha);
setFillColor(grayLevel, /\* (optional) \*/ alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);
```

関連情報
----

* キャンバス API
* このプロパティを定義しているインターフェイス: `CanvasRenderingContext2D`
* このプロパティで使われる値:
    + `<color>` CSS データ型
    + `CanvasGradient` オブジェクト
    + `CanvasPattern` オブジェクト