CanvasRenderingContext2D.stroke() - Web API

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 プロパティ - Web API

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` オブジェクト


CanvasRenderingContext2D.closePath() - Web API

CanvasRenderingContext2D.closePath()
====================================

**`CanvasRenderingContext2D.closePath()`** はキャンバス 2D API のメソッドで、現在の点から現在のサブパスの開始点までの間に直線を追加することを試みます。図形がすでに閉じていたり、 1 つしか点がなかったりした場合は、この関数は何もしません。

このメソッドはキャンバスには直接は何も描きません。 `stroke()` または `fill()` (en-US) メソッドを使用してそのパスを描画することができます。

構文
--

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

例
-

### 三角形を閉じる

この例は最初に三角形の2つの (対角の) 辺を `lineTo()` メソッドを使用して作成します。その後で、図形の最初と最後の点を自動的に接続する `closePath()` メソッドで、底辺を作成します。

#### HTML

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

#### JavaScript

三角形の頂点は、 (20, 150), (120, 20), (220, 150) とします。

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

ctx.beginPath();
ctx.moveTo(20, 140); // ペンを左下の隅へ移動
ctx.lineTo(120, 10); // 上中央へ線を引く
ctx.lineTo(220, 140); // 右下の隅へ線を引く
ctx.closePath(); // 左下の隅へ線を引く
ctx.stroke();
```

#### 結果

### サブパスを 1 つだけ閉じる

この例では、非接続のサブパス3つからなるスマイリーの顔マークを描画します。

**メモ:** すべての弧について、作成された後で `closePath()` が呼び出されていますが、最後の弧 (サブパス) のみが閉じられます。

#### HTML

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

#### JavaScript

最初の 2 つの弧は顔の目を作成します。最後の弧は口を作成します。

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

ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


CanvasRenderingContext2D.lineTo() - Web API

CanvasRenderingContext2D.lineTo()
=================================

`CanvasRenderingContext2D` の **`lineTo()`** はキャンバス 2D API のメソッドで、現在のサブパスに対して、その終点から指定された `(x, y)` 座標に向けて直線を追加します。

現在のパスを変更するほかのメソッドと同様に、このメソッドは直悦は何も描画しません。パスをキャンバス上に描くには、 `fill()` (en-US) または `stroke()` メソッドを使用します。

構文
--

```js
ctx.lineTo(x, y);
```

### 引数

`x`

直線の終点となる x 座標。

`y`

直線の終点となる y 座標。

### 返値

`undefined`.

例
-

### 直線の描画

この例は、 `lineTo()` メソッドを使用して直線を描きます。

#### HTML

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

#### JavaScript

The line begins at (30, 50) and ends at (150, 100).

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

ctx.beginPath(); // 新しいパスを開始
ctx.moveTo(30, 50); // ペンを (30, 50) へ移動
ctx.lineTo(150, 100); // 直線を (150, 100) へ描く
ctx.stroke(); // パスを描画
```

#### 結果

### 連続線の描画

`lineTo()` （または類似のメソッド）を呼び出すたびに、現在のパスに自動的に追加されます。すなわち、すべての線が描画され、互いに塗りつぶされます。
 この例では、一筆書きで 'M' の文字を描画します。

#### HTML

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

#### JavaScript

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

ctx.moveTo(90, 130);
ctx.lineTo(95, 25);
ctx.lineTo(150, 80);
ctx.lineTo(205, 25);
ctx.lineTo(210, 130);
ctx.lineWidth = 15;
ctx.stroke();
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


CanvasRenderingContext2D.strokeRect() - Web API

CanvasRenderingContext2D.strokeRect()
=====================================

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

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

構文
--

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

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

### 引数

`x`

矩形の始点となる x 座標。

`y`

矩形の始点となる y 座標。

`width`

矩形の幅。正の値で右方向、負の値で左方向に描画します。

`height`

矩形の高さ。正の値で下方向、負の値で上方向に描画します。

例
-

### 単純な矩形の輪郭

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

#### HTML

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

#### JavaScript

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

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

#### 結果

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

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

#### HTML

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

#### JavaScript

```js
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);
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


CanvasRenderingContext2D.imageSmoothingEnabled - Web API

CanvasRenderingContext2D.imageSmoothingEnabled
==============================================

**`imageSmoothingEnabled`** は `CanvasRenderingContext2D` インターフェイスのプロパティで、キャンバス 2D API の一部です。スケーリングされた画像を平滑化するか (`true`、既定値) またはしないか (`false`) を決定します。 `imageSmoothingEnabled` プロパティを取得すると、最後に設定された値が返されます。

このプロパティは、ピクセルアートを使用するゲームやその他のアプリで有用です。画像を拡大するとき、既定のリサイズアルゴリズムではピクセルがぼけてしまいます。このプロパティを `false` に設定すると、ピクセルの鮮明さを維持します。

**メモ:** 平滑化の品質は、 `imageSmoothingQuality` プロパティで調整することができます。

構文
--

```js
ctx.imageSmoothingEnabled = value;
```

### オプション

`value`

画像を滑らかに拡大するかどうかを示す論理値です。既定値は `true` です。

例
-

### 画像の平滑化を無効化

この例では 3 つの画像を比較します。最初の画像は自然なサイズで描画され、 2 番目は画像の平滑化を有効にしたまま 3 倍に拡大して描画し、 3 番目は画像の平滑化を無効にして 3 倍に拡大して描画しています。

#### HTML

```html
<canvas id="canvas" width="460" height="210"></canvas>
```

#### JavaScript

```js
const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.textAlign = "center";

const img = new Image();
img.src =
  "https://interactive-examples.mdn.mozilla.net/media/examples/star.png";
img.onload = function () {
  const w = img.width,
    h = img.height;

  ctx.fillText("Source", w \* 0.5, 20);
  ctx.drawImage(img, 0, 24, w, h);

  ctx.fillText("Smoothing = TRUE", w \* 2.5, 20);
  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(img, w, 24, w \* 3, h \* 3);

  ctx.fillText("Smoothing = FALSE", w \* 5.5, 20);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, w \* 4, 24, w \* 3, h \* 3);
};
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.imageSmoothingQuality`
* `image-rendering`


CanvasRenderingContext2D: font プロパティ - Web API

CanvasRenderingContext2D: font プロパティ
====================================

**`CanvasRenderingContext2D.font`** はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS の font の記述子と同じ構文を用います。

値
-

文字列で、CSS の `font` の値として解釈されるものです。既定のフォントは 10px sans-serif です。

例
-

### カスタムフォントの使用

この例では、 `font` プロパティを使用して、カスタムフォントの太さ、大きさ、ファミリーを指定します。

#### HTML

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

#### JavaScript

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

ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);
```

#### 結果

### CSS フォント読み込み API でフォントを読み込む

`FontFace` API の助力により、キャンバスで使用する前にフォントを明示的に読み込むことができます。

```js
let f = new FontFace("test", "url(x)");

f.load().then(() => {
  // canvas コンテキストでフォントを使用する準備ができた
});
```

仕様書
---

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

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

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

関連情報
----

* このメソッドを定義するインターフェイス: `CanvasRenderingContext2D`


CanvasRenderingContext2D.canvas - Web API

CanvasRenderingContext2D.canvas
===============================

**`CanvasRenderingContext2D.canvas`** はキャンバス API の一部で、このコンテキストに関連付けられた `HTMLCanvasElement` オブジェクトへの読み取り専用の参照です。 `<canvas>` に関連づけられていない場合は `null` になることがあります。

構文
--

```js
ctx.canvas;
```

例
-

この `<canvas>` 要素があるとします。

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

`CanvasRenderingContext2D` の中にある canvas 要素への参照は、 `canvas` プロパティから取得することができます。

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

仕様書
---

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

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

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

関連情報
----

* `CanvasRenderingContext2D` インターフェイス
* キャンバス API


CanvasRenderingContext2D: strokeStyle プロパティ - Web API

CanvasRenderingContext2D: strokeStyle プロパティ
===========================================

**`CanvasRenderingContext2D.strokeStyle`** はキャンバス 2D API のプロパティで、図形の辺（輪郭）に使用する色、グラデーション、またはパターンを指定します。既定値は `#000` （黒色）です。

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

値
-

以下のいずれかです。

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

### 図形の輪郭色の変更

このサンプルでは、青色の輪郭を矩形に適用します。

#### HTML

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

#### JavaScript

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

ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);
```

#### 結果

### ループを使用した複数の輪郭色の作成

この例では、 2 つの `for` ループと `arc()` メソッドを使用して、それぞれが異なる輪郭色を持つ円のグリッドを描画します。このためには、 2 つの変数 `i` と `j` を使用して、円ごとに固有の RGB 色を生成し、また緑色と青色の値だけを変更するようにします（赤色は固定値とします）。
```

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

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

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.strokeStyle = `rgb(
 0,
 ${Math.floor(255 - 42.5 \* i)},
 ${Math.floor(255 - 42.5 \* j)})`;
    ctx.beginPath();
    ctx.arc(12.5 + j \* 25, 12.5 + i \* 25, 10, 0, Math.PI \* 2, true);
    ctx.stroke();
  }
}
```

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

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

仕様書
---

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

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

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

### WebKit/Blink 特有のメモ

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

```js
setStrokeColor(color);
setStrokeColor(color, alpha);
setStrokeColor(grayLevel);
setStrokeColor(grayLevel, alpha);
setStrokeColor(r, g, b, a);
setStrokeColor(c, m, y, k, a);
```

関連情報
----

* このプロパティを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasPattern`


CanvasRenderingContext2D: drawImage() メソッド - Web API

CanvasRenderingContext2D: drawImage() メソッド
==========================================

Canvas 2D API の **`CanvasRenderingContext2D.drawImage()`** メソッドは、キャンバスに画像を描画するいくつかの方法を提供します。

構文
--

```js
drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
```

![drawImage](/ja/docs/Web/API/CanvasRenderingContext2D/drawImage/canvas_drawimage.jpg)

### 引数

`image`

 このコンテキストに描画する要素です。仕様では、任意のキャンバスの画像ソースが使えます。
 具体的には、
 `HTMLImageElement`、
 `SVGImageElement` (en-US)、
 `HTMLVideoElement`、
 `HTMLCanvasElement`、
 `ImageBitmap`、
 `OffscreenCanvas` (en-US)、
 `VideoFrame` (en-US) が使えます。

`sx` 省略可

描画先のコンテキストに描画する、描画元 `image` の内部の長方形の左上の x 座標です。この引数を省略する場合は、引数 3 個または 5 個の構文を使用します。

`sy` 省略可

描画先のコンテキストに描画する、描画元 `image` の内部の長方形の左上の y 座標です。この引数を省略する場合は、引数 3 個または 5 個の構文を使用します。

`sWidth` 省略可

描画先のコンテキストに描画する、描画元 `image` の内部の長方形の幅です。指定しない場合は、`sx` と `sy` で指定した座標から画像の右下の角までの長方形全体が使用されます。この引数を省略する場合は、引数 3 個または 5 個の構文を使用します。負の値を指定すると、画像が反転します。

`sHeight` 省略可

描画先のコンテキストに描画する、描画元 `image` の内部の長方形の高さです。この引数を省略する場合は、引数 3 個または 5 個の構文を使用します。負の値を指定すると、画像が反転します。

`dx`

描画元 `image` の左上の角を配置する、描画先キャンバス内の x 座標です。

`dy`

描画元 `image` の左上の角を配置する、描画先キャンバス内の y 座標です。

`dWidth`

`image` を描画先キャンバスに描画する際の幅です。これにより、描画する画像の拡大や縮小ができます。指定しない場合は、画像はそのままの幅で描画されます。この引数は引数 3 個の構文にはありません。

`dHeight`

`image` を描画先キャンバスに描画する際の高さです。これにより、描画する画像の拡大や縮小ができます。指定しない場合は、画像はそのままの高さで描画されます。この引数は引数 3 個の構文にはありません。

### 返値

なし (`undefined`)

### 例外

`InvalidStateError` `DOMException`

`image` に画像データが無いときや、キャンバスまたは描画元の長方形の幅または高さがゼロであるとき、投げられます。

`TypeMismatchError` `DOMException`

引数 `image` に `null` または `undefined` が渡されたとき投げられます。

例
-

### キャンバスに画像を描画する

この例では、`drawImage()` メソッドを用いてキャンバスに画像を描画します。

#### HTML

```html
<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source" src="rhino.jpg" width="300" height="227" />
</div>
```

#### JavaScript

元画像は、座標 (33, 71) を始点とし、幅 104、高さ 124 です。画像は、キャンバスの (21, 20) に、幅 87、高さ 104 で描かれます。

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

image.addEventListener("load", (e) => {
  ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
});
```

#### 結果

### 元画像の要素サイズを理解する

`drawImage()` メソッドは、描画時、描画元要素の *CSS ピクセルでの内在サイズ* を用います。

たとえば、`Image` を読み込み、コンストラクターで任意のサイズパラメーターを指定した場合は、切り抜きや拡大縮小の領域などを正しく計算するには、`element.width` と `element.height` ではなく、生成したインスタンスの `naturalWidth` と `naturalHeight` プロパティを用いなければなりません。要素が `<video>` 要素などであるときは、これは `videoWidth` と `videoHeight` にも適用されます。

#### HTML

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

#### JavaScript

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

const image = new Image(60, 45); // image で任意の画像サイズを使用する
image.onload = drawImageActualSize; // 画像が読み込まれたら、描画する

// CSS ピクセルで内在サイズが 300x227 の画像を読み込む
image.src = "rhino.jpg";

function drawImageActualSize() {
  // canvas 要素には画像の CSS ピクセルでの内在サイズを用いる
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;

  // コンストラクターで指定したサイズ 60x45 を無視し、画像を 300x227 で描画する
  ctx.drawImage(this, 0, 0);

  // 独自のサイズを使用するには、要素の width と height プロパティに基づいて
  // 拡大縮小のパラメーターを指定する必要があります。
  // ここでは、上部の角に描画します。
  ctx.drawImage(this, 0, 0, this.width, this.height);
}
```

#### 結果

仕様書
---

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

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

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

注意点
---

* `HTMLVideoElement` では、`drawImage()` は `HTMLMediaElement.readyState` が 1 より大きいとき (すなわち、`currentTime` プロパティの設定後に **seek** イベントが発火したとき) のみ正しく動作します。
* `drawImage()` は、描画・切り抜き・拡大縮小を行なう際、常に描画元要素の *CSS ピクセルでの内在サイズ* を使用します。
* 古いブラウザーのバージョンには、`drawImage()` が Orientation を含む画像のすべての EXIF メタデータを無視するものがあります。この挙動は、特に iOS デバイスで不都合のもとになります。修正するには、自分で Orientation を検出して `rotate()` を用いるとよいでしょう。
関連情報
----

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


CanvasRenderingContext2D.textBaseline - Web API

CanvasRenderingContext2D.textBaseline
=====================================

**`CanvasRenderingContext2D.textBaseline`** はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストのベースライン（基準線）を指定します。

構文
--

```js
ctx.textBaseline =
  "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
```

### オプション

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

`"top"`

テキストのベースラインは em の高さの範囲 (em square) の上になります。

`"hanging"`

テキストのベースラインは hanging ベースラインになります（チベット語などのインド系の文字で使用されます）。

`"middle"`

テキストのベースラインは em の高さの範囲の中央になります。

`"alphabetic"`

テキストのベースラインは標準的なアルファベットベースラインになります。既定値です。

`"ideographic"`

テキストのベースラインは表意文字ベースラインになります。文字の主要範囲の底辺がアルファベットベースラインの下からはみ出る場合があるのに対し、このラインは主要範囲の底辺そのものを表します。(中国語、日本語、韓国語で意味を持ちます。)

`"bottom"`

テキストのベースラインは囲みボックスの下辺になります。表意文字ベースラインとの違いは、表意文字ベースラインがディセンダー (descenders) を考慮しないことです。

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

例
-

### 様々なプロパティ値の比較

この例では、様々な `textBaseline` プロパティ値を例示します。

#### HTML

```html
<canvas id="canvas" width="550" height="500"></canvas>
```

#### JavaScript

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

const baselines = [
  "top",
  "hanging",
  "middle",
  "alphabetic",
  "ideographic",
  "bottom",
];
ctx.font = "36px serif";
ctx.strokeStyle = "red";

baselines.forEach(function (baseline, index) {
  ctx.textBaseline = baseline;
  const y = 75 + index \* 75;
  ctx.beginPath();
  ctx.moveTo(0, y + 0.5);
  ctx.lineTo(550, y + 0.5);
  ctx.stroke();
  ctx.fillText("Abcdefghijklmnop (" + baseline + ")", 0, y);
});
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* このメソッドを定義しているするインターフェイスである `CanvasRenderingContext2D`


CanvasRenderingContext2D.ellipse() - Web API

CanvasRenderingContext2D.ellipse()
==================================

**`CanvasRenderingContext2D.ellipse()`** はキャンバス 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。

構文
--

```js
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise]);
```

`ellipse()` メソッドは `(x, y)` を中心として、 `radiusX` と `radiusY` を半径とする楕円の弧を生成します。パスは `startAngle` から始まって `endAngle` で終わり、回転方向は `anticlockwise` で指定します（既定では時計回りです）。

### 引数

`x`

楕円の中心の X 軸 (水平) 座標です。

`y`

楕円の中心の Y 軸 (垂直) 座標です。

`radiusX`

楕円の長辺の半径です。負の値であってはなりません。

`radiusY`

楕円の短辺の半径です。負の値であってはなりません。

`rotation`

楕円の傾きで、ラジアンで表現します。

`startAngle`

楕円が始まる角度で、正の X 軸から時計回りの角度をラジアンで表現したものです。

`endAngle`

楕円が終わる角度で、正の X 軸から時計回りの角度をラジアンで表現したものです。

`counterclockwise` 省略可

省略可能な論理値で、 `true` の場合は楕円を反時計回りに描きます。既定値は `false` (時計回り) です。

例
-

### 完全な楕円の描画

この例は、 π/4 ラジアンの角度 (45**°**) で楕円を描きます。楕円全体を描くには、弧が 0 ラジアン (0**°**) で始まり、 2π ラジアン (360**°**) で終わるようにします。

#### HTML

```html
<canvas id="canvas" width="200" height="200"></canvas>
```

#### JavaScript

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

// 楕円を描画
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 \* Math.PI);
ctx.stroke();

// Draw the ellipse's line of reflection
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();
```

#### 結果

### 様々な楕円の弧

この例では、様々な属性の3本の楕円のパスを生成します。

#### HTML

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

#### JavaScript

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

ctx.fillStyle = "red";
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI \* 0.25, 0, Math.PI \* 1.5);
ctx.fill();

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI \* 0.25, 0, Math.PI);
ctx.fill();

ctx.fillStyle = "green";
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI \* 0.25, 0, Math.PI, true);
ctx.fill();
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* 真円を描くには `CanvasRenderingContext2D.arc()` を使用してください。


CanvasRenderingContext2D.beginPath() - Web API

CanvasRenderingContext2D.beginPath()
====================================

**`CanvasRenderingContext2D.beginPath()`** はキャンバス 2D API のメソッドで、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合は、このメソッドを呼び出してください。

>
> \*\*メモ:\*\*しいサブパス (つまり、現在のキャンバスの状態に一致するサブパス) を作成する場合、`CanvasRenderingContext2D.moveTo()`を使用できます。
>
>
>

構文
--

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

例
-

### 異なるパスの作成

この例では、それぞれが 1 本の直線を含む 2 つのパスを作成します。

#### HTML

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

#### JavaScript

`beginPath()` メソッドがそれぞれの線を引く前に呼び出されるため、それぞれの線は別々な色で描かれます。

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

// 第 1 のパス
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// 第 2 のパス
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


CanvasRenderingContext2D: shadowOffsetY プロパティ - Web API

CanvasRenderingContext2D: shadowOffsetY プロパティ
=============================================

Canvas 2D API の **`CanvasRenderingContext2D.shadowOffsetY`** は、影を縦方向にずらす距離を設定します。

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

値
-

影を縦方向にずらす距離を表す浮動小数点数です。正の値を設定すると下に、負の値を設定すると上にずらします。デフォルト値は `0` (縦方向にずらさない) です。`Infinity` や `NaN` は無視されます。

例
-

### 影を縦方向にずらす

この例では、長方形にぼかしがかかった影を加えます。プロパティ `shadowColor` で影の色を設定し、`shadowOffsetY` で影のオフセットを下に 25 単位に設定し、`shadowBlur` で影のぼかしレベルを 10 に設定します。

#### HTML

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

#### JavaScript

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

// 影
ctx.shadowColor = "red";
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;

// 長方形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.shadowOffsetX`
* `CanvasRenderingContext2D.shadowColor`
* `CanvasRenderingContext2D.shadowBlur`


CanvasRenderingContext2D.fillRect() - Web API

CanvasRenderingContext2D.fillRect()
===================================

**`CanvasRenderingContext2D.fillRect()`** はキャンバス 2D API のメソッドで、塗りつぶした矩形を現在の `fillStyle` に基づいて描きます。

このメソッドはキャンバスに直接描画を行い、現在のパスを変更しません。したがって、その後の `fill()` (en-US) または `stroke()` の呼び出しには影響しません。

構文
--

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

`fillRect()` メソッドは塗りつぶした矩形を、 `(x, y)` を始点とし、 `width` と `height` でサイズを指定しで描画します。塗りつぶしのスタイルは、現在の `fillStyle` 属性によって決定されます。

### 引数

`x`

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

`y`

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

`width`

矩形の幅です。正の数であれば右方向、負の数であれば左方向です。

`height`

矩形の高さです。正の数であれば下方向、負の数であれば上方向です。

例
-

### 単純な塗りつぶした矩形

`fillRect` メソッドを利用した簡単な使用例です。

#### HTML

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

#### JavaScript

矩形の左上は (20, 10) です。幅は 150 で高さは 100 です。

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

#### 結果

### キャンバス全体の塗りつぶし

このコードでは、キャンバス全体を矩形で塗りつぶします。これは、背景を作成し、その上に他のものを描画するのに便利です。このため、矩形の寸法は `<canvas>` 要素の `width` と `height` 属性に等しくなるように設定されています。

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
```

仕様書
---

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

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

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

関連情報
----

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


CanvasRenderingContext2D: getImageData() メソッド - Web API

CanvasRenderingContext2D: getImageData() メソッド
=============================================

Canvas 2D API の `CanvasRenderingContext2D` メソッド **`getImageData()`** は、キャンバスの指定の部分に対応するピクセルデータを表す `ImageData` オブジェクトを返します。

このメソッドは、キャンバスの変換行列の影響を受けません。指定された矩形がキャンパスの境界の外にはみ出る場合は、返される `ImageData` オブジェクトのキャンバスの外側の部分は透明な黒になります。

**メモ:** 画像データは、`putImageData()` メソッドでキャンバスに描画できます。

キャンバスとピクセル操作に、`getImageData()` およびキャンバスの内容の一般的な操作に関するさらなる情報があります。

構文
--

```js
getImageData(sx, sy, sw, sh)
getImageData(sx, sy, sw, sh, settings)
```

### 引数

`sx`

`ImageData` を取り出す矩形の左上の角の x 座標です。

`sy`

`ImageData` を取り出す矩形の左上の角の y 座標です。

`sw`

`ImageData` を取り出す矩形の幅です。正の値を指定すると右向きに、負の値を指定すると左向きに取り出します。

`sh`

`ImageData` を取り出す矩形の高さです。正の値を指定すると下向きに、負の値を指定すると上向きに取り出します。

`settings` 省略可

以下のプロパティを持つオブジェクトです。

* `colorSpace`: 画像データの色空間を指定します。sRGB 色空間 を表す `"srgb"`、もしくは display-p3 色空間 を表す `"display-p3"` が設定できます。

### 返値

キャンバスの指定の矩形の画像データが入った `ImageData` オブジェクトを返します。矩形の左上の角の座標は `(sx, sy)` であり、下の角の座標は `(sx + sw - 1, sy + sh - 1)` です。

### 例外

`IndexSizeError` `DOMException`

`sw` または `sh` のいずれかがゼロのとき投げられます。

`SecurityError` `DOMException`

 キャンバスがドキュメント自身が読み込まれたオリジンとは異なるオリジンから読み込まれたピクセルを含むか、含む可能性があるとき投げられます。
 このような場合に `SecurityError` `DOMException` が投げられるのを回避するには、元画像がこのように使われるのを許可するように CORS を設定してください。画像とキャンバスをオリジン間で利用できるようにするを参照してください。

例
-

### キャンバスから画像データを取得する

この例では、画像を描画し、`getImageData()` を用いてキャンバスの一部を取得します。

`getImageData()` を用いて、画像の `(10, 20)` を始点とし、幅 `80`、高さ `230` の部分を取り出します。そして、この部分を 3 回、前回描画した部分の右下に描画していきます。

#### HTML

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

#### JavaScript

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

const image = new Image();
image.src = "plumeria.jpg";
image.addEventListener("load", () => {
  ctx.drawImage(image, 0, 0, 233, 320);

  const imageData = ctx.getImageData(10, 20, 80, 230);
  ctx.putImageData(imageData, 260, 0);
  ctx.putImageData(imageData, 380, 50);
  ctx.putImageData(imageData, 500, 100);
});
```

#### 結果

### 色空間の変換

省略可能な `colorSpace` を設定することで、欲しい形式の画像データを得ることができます。

```js
const context = canvas.getContext("2d", { colorSpace: "display-p3" });
context.fillStyle = "color(display-p3 0.5 0 0)";
context.fillRect(0, 0, 10, 10);

// ImageData を sRGB に変換する
const imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(imageData.colorSpace); // "srgb"
```

仕様書
---

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

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

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

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* `ImageData` オブジェクト
* `CanvasRenderingContext2D.putImageData()`
* キャンバスとピクセル操作


CanvasRenderingContext2D.textAlign - Web API

CanvasRenderingContext2D.textAlign
==================================

**`CanvasRenderingContext2D.textAlign`** はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキスト配置を指定します。

配置は `fillText()` メソッドの x の値からの相対になります。 `textAlign` が `"center"` であれば、テキストの左端は `x - (textWidth / 2)` になります。

構文
--

```js
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
```

### オプション

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

`"left"`

テキストを左揃えにします。

`"right"`

テキストを右揃えにします。

`"center"`

テキストを中央揃えにします。

`"start"`

テキストをその行の標準的な先頭位置に配置します（左書きロケールでは左揃え、右書きのロケールでは右揃え）。

`"end"`

テキストをその行の標準的な末尾位置に配置します（左書きロケールでは右揃え、右書きのロケールでは左揃え）。

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

例
-

### 全般的なテキスト配置

この例では、 `textAlign` プロパティの 3 つの「物理的な」値、 `"left"`, `"center"`, `"right"` を示しています。

#### HTML

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

#### JavaScript

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

ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = "30px serif";

ctx.textAlign = "left";
ctx.fillText("左揃え", x, 40);

ctx.textAlign = "center";
ctx.fillText("中央揃え", x, 85);

ctx.textAlign = "right";
ctx.fillText("右揃え", x, 130);
```

#### 結果

### 書字方向に依存したテキストの配置

この例では、 `textAlign` プロパティの 2 つの書字方向に依存する値、 `"start"` と `"end"`を示しています。なお、 `direction` プロパティは手動で `"ltr"` と指定していますが、これは英語のテキストに対する既定値でもあります。

#### HTML

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

#### JavaScript

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

ctx.font = "30px serif";
ctx.direction = "ltr";

ctx.textAlign = "start";
ctx.fillText("先頭揃え", 0, 50);

ctx.textAlign = "end";
ctx.fillText("末尾揃え", canvas.width, 120);
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* このメソッドを定義しているするインターフェイスである `CanvasRenderingContext2D`


CanvasRenderingContext2D: shadowOffsetX プロパティ - Web API

CanvasRenderingContext2D: shadowOffsetX プロパティ
=============================================

Canvas 2D API の **`CanvasRenderingContext2D.shadowOffsetX`** プロパティは、影を横方向にずらす距離を設定します。

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

値
-

影を横方向にずらす距離を表す浮動小数点数です。正の値を設定すると右に、負の値を設定すると左にずらします。デフォルト値は `0` (横方向にずらさない) です。`Infinity` や `NaN` は無視されます。

例
-

### 影を横方向にずらす

この例では、長方形にぼかしがかかった影を加えます。プロパティ `shadowColor` で影の色を設定し、`shadowOffsetX` で影のオフセットを右に 25 単位に設定し、`shadowBlur` で影のぼかしレベルを 10 に設定します。

#### HTML

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

#### JavaScript

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

// 影
ctx.shadowColor = "red";
ctx.shadowOffsetX = 25;
ctx.shadowBlur = 10;

// 長方形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.shadowOffsetY`
* `CanvasRenderingContext2D.shadowColor`
* `CanvasRenderingContext2D.shadowBlur`


CanvasRenderingContext2D.globalCompositeOperation - Web API

CanvasRenderingContext2D.globalCompositeOperation
=================================================

**`CanvasRenderingContext2D.globalCompositeOperation`** はキャンバス 2D API のプロパティで、新たな図形を描くときに適用する合成演算の種類を定めます。

キャンバスのチュートリアルの合成とクリッピングの章も参照してください。

構文
--

```js
ctx.globalCompositeOperation = type;
```

`type` は文字列で、使用する合成と混色モードの演算を識別します。

### 種類

例
-

### 合成演算の変更

この例では `globalCompositeOperation` プロパティを使用して、 2 つの矩形が重なり合う部分で自分自身を除外して描画しています。

#### HTML

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

#### JavaScript

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

ctx.globalCompositeOperation = "xor";

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

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
```

#### 結果

仕様書
---

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

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

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

### WebKit/Blink 特有のメモ

* WebKit および Blink ベースのブラウザーでは、このプロパティに加えて標準外で非推奨のメソッド `ctx.setCompositeOperation()` が実装されています。
* `"plus-darker"` および `"darker"` は Chrome 48 で取り除かれました。代替策を探している人は、 `"darken"` を使用してください。
### Gecko 特有のメモ

* 初期のキャンバス仕様の草案では、値として "darker" が定められていました。しかし、 Firefox はバージョン 4 で "darker" の対応をやめました (Firefox バグ 571532)。このブログ記事では、 `"difference"` を使用して `"darker"` に近い効果が得られることを示していますので参照してください。
関連情報
----

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


CanvasRenderingContext2D: strokeText() メソッド - Web API

CanvasRenderingContext2D: strokeText() メソッド
===========================================

`CanvasRenderingContext2D` の **`strokeText()`** メソッドはキャンバス 2D API の一部であり、テキスト文字列の文字の輪郭を指定した座標に描画します。オプションの引数で、描画されるテキストの最大幅を指定することができます。ユーザーエージェントはこの幅を実現するために、テキストを圧縮したり、フォントサイズを縮小したりします。

このメソッドは現在のパスを変更することなく、直接キャンバスに描画を行います。その後の `fill()` (en-US) や `stroke()` には影響を与えません。

**メモ:** 輪郭線のみを描くのではなく、テキスト文字を塗りつぶすのであれば `fillText()` メソッドを使用してください。

構文
--

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

### 引数

`text`

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

`x`

テキストを描き始める位置の X 座標です。

`y`

テキストを描き始める位置の Y 座標です。

`maxWidth` 省略可

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

### 返値

なし (`undefined`)。

例
-

### テキストの輪郭線の描画

この例では、 "Hello world" という語を `strokeText()` メソッドを使用して描きます。

#### 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.strokeText("Hello world", 50, 90);
```

このコードは `<canvas>` への参照を受け取り、そこから二次元グラフィックコンテキストへの参照を取得します。

そこで、 `font` に 50 ピクセル高の "serif" （ユーザーの既定のセリフ付きフォント）を設定し、`strokeText()` を呼び出して座標 (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.strokeText("Hello world", 50, 90, 140);
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* テキストの描画
* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillText()`


CanvasRenderingContext2D.measureText() - Web API

CanvasRenderingContext2D.measureText()
======================================

`CanvasRenderingContext2D.measureText()` メソッドは、測定したテキストの情報（例えば幅など）を持つ `TextMetrics` (en-US) オブジェクトを返します。

構文
--

```js
ctx.measureText(text);
```

### 引数

text

測定する文字列。

### 返値

`TextMetrics` (en-US) オブジェクト。

例
-

以下の `<canvas>` 要素があるとします。

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

以下のコードを使用して `TextMetrics` (en-US) オブジェクトを得ることができます。

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

let text = ctx.measureText("Hello world");
console.log(text.width); // 56;
```

仕様書
---

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

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

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

関連情報
----

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


CanvasRenderingContext2D: globalAlpha プロパティ - Web API

CanvasRenderingContext2D: globalAlpha プロパティ
===========================================

Canvas 2D API の **`CanvasRenderingContext2D.globalAlpha`** プロパティは、図形や画像をキャンバスに描画する際に適用されるアルファ値 (透明度) を設定します。

**メモ:** Canvas チュートリアルのスタイルと色の適用も参照してください。

値
-

`0.0` (完全に透明) と `1.0` (完全に不透明) の間の数値で、両端を含みます。デフォルト値は `1.0` です。`Infinity` や `NaN` を含むこの範囲の外の値は設定されず、`globalAlpha` のもとの値が維持されます。

例
-

### 半透明の図形を描画する

この例では、`globalAlpha` プロパティを用いて 2 個の半透明の矩形を描画します。

#### HTML

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

#### JavaScript

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

ctx.globalAlpha = 0.5;

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

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
```

#### 結果

### 透明な図形を重ねる

この例では、複数の透明な図形をそれぞれの上に重ねることの効果を示します。まず、4 個の異なる色の正方形からなるはっきりした背景を描画します。次に、`globalAlpha` プロパティを `0.2` (20% 不透明) に設定します。このアルファレベルは、透明な図形すべてに適用されます。そして、`for` ループを用いて半径を大きくしながら円を描いていきます。

新しい円を描くごとに、下にある既存の円の不透明度が事実上上がります。ステップ数を増やす (ことで描く円を増やす) と、やがて画像の中央から背景は完全に消えるでしょう。
```

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

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

// 背景を描画する
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";

// 透明度を設定する
ctx.globalAlpha = 0.2;

// 透明な円を描画する
for (let i = 0; i < 7; i++) {
  ctx.beginPath();
  ctx.arc(75, 75, 10 + 10 \* i, 0, Math.PI \* 2, true);
  ctx.fill();
}
```

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

仕様書
---

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

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

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

### Gecko 固有の注意点

* Gecko 5.0 以降では、不正な値を `globalAlpha` に設定しても `SYNTAX_ERR` 例外は投げられず、正しく黙って無視されます。
### WebKit/Blink 固有の注意点

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

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


CanvasRenderingContext2D: imageSmoothingQuality プロパティ - Web API

CanvasRenderingContext2D: imageSmoothingQuality プロパティ
=====================================================

Canvas API に含まれる `CanvasRenderingContext2D` インターフェイスの **`imageSmoothingQuality`** プロパティは、画像の平滑化の品質を設定できます。

**メモ:** このプロパティが効果を発揮するには、`imageSmoothingEnabled` が `true` でなければなりません。

値
-

以下のいずれかです。

`"low"`

低品質です。

`"medium"`

中程度の品質です。

`"high"`

高品質です。

例
-

### 画像の平滑化の品質を設定する

この例では、拡大縮小する画像で `imageSmoothingQuality` プロパティを用います。

#### HTML

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

#### JavaScript

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

let img = new Image();
img.src = "canvas\_createpattern.png";
img.onload = () => {
  ctx.imageSmoothingQuality = "low";
  ctx.drawImage(img, 0, 0, 300, 150);
};
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティを定義しているインターフェイス: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.imageSmoothingEnabled`
* `image-rendering`


CanvasRenderingContext2D: shadowBlur プロパティ - Web API

CanvasRenderingContext2D: shadowBlur プロパティ
==========================================

Canvas 2D API の **`CanvasRenderingContext2D.shadowBlur`** プロパティは、影にかかるぼかしの量を設定します。デフォルトは `0` (ぼかしなし) です。

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

値
-

影のぼかしの度合いを設定する非負の浮動小数点数です。`0` がぼかしなしを表し、数を大きくするとぼかしが強くなります。この値はピクセル数には対応せず、現在の変換行列の影響を受けません。デフォルト値は `0` です。負の値、`Infinity`、`NaN` は無視されます。

例
-

### 図形に影を加える

この例では、長方形にぼかしがかかった影を加えます、`shadowColor` プロパティで影の色を設定し、`shadowBlur` でぼかしの度合いを設定します。

#### HTML

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

#### JavaScript

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

// 影
ctx.shadowColor = "red";
ctx.shadowBlur = 15;

// 長方形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-context-2d-shadowblur-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.shadowColor`


CanvasRenderingContext2D.arc() - Web API

CanvasRenderingContext2D.arc()
==============================

**`CanvasRenderingContext2D.arc()`** はキャンバス 2D API のメソッドで、サブパスに円弧を加えます。

構文
--

```js
void ctx.arc(x, y, radius, startAngle, endAngle [, counterclockwise]);
```

`arc()` メソッドは (x, y) を中心とし、 `radius` を半径とした円弧を作成します。角度は `startAngle` から `endAngle` まで、 `counterclockwise` で指定された向き（既定では時計回り）に描かれます。

### 引数

`x`

円弧の中心の水平座標です。

`y`

円弧の中心の垂直座標です。

`radius`

円弧の半径です。正の数である必要があります。

`startAngle`

円弧の始まりの角度を、 X 軸の正の方向から時計回りに定められるラジアン角で表します。

`endAngle`

円弧の終わりの角度を、 X 軸の正の方向から時計回りに定められるラジアン角で表します。

`counterclockwise` 省略可

省略可能な論理値です。 `true` の場合、円弧を反時計回りに始まりから終わりの角度に向けて描きます。既定値は `false` （時計回り）です。

例
-

### 完全な円の描画

このコードは、 `arc()` メソッドで完全な円を描く方法を示します。

#### HTML

```html
<canvas></canvas>
```

#### JavaScript

円弧の X 座標は 100、 Y 座標は 75、半径は 50 です。円弧を一周させるには、 0 ラジアン（0**°**）の角度で始まり、 2π ラジアン（360**°**）の角度で終わります。

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

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 \* Math.PI);
ctx.stroke();
```

#### 結果

### 様々な形状のデモ

以下の例は様々な形を描くことで、 `arc()` メソッドは何ができるのかを示します。
```

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

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

// Draw shapes
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 2; j++) {
    ctx.beginPath();
    let x = 25 + j \* 50; // x 座標
    let y = 25 + i \* 50; // y 座標
    let radius = 20; // 円弧の半径
    let startAngle = 0; // 円弧の開始位置
    let endAngle = Math.PI + (Math.PI \* j) / 2; // 円弧の終了位置
    let counterclockwise = i % 2 == 1; // 円弧を描く方向

    ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}
```

#### 結果

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

仕様書
---

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

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

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

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* 楕円弧を描くには `CanvasRenderingContext2D.ellipse()` を使用してください。


CanvasRenderingContext2D.clearRect() - Web API

CanvasRenderingContext2D.clearRect()
====================================

**`CanvasRenderingContext2D.clearRect()`** はキャンバス 2D API のメソッドで、矩形領域のピクセルを、透明な黒に設定することで消去します。

**メモ:** `clearRect()` は、正しいパスの使用を行わないと、意図しない副作用が発生することがあることに注意してください。 `clearRect()` を呼び出した後、必ず新しいアイテムを描画し始める前に `beginPath()` を呼び出してください。

構文
--

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

`clearRect()` メソッドは、矩形領域のピクセルを透明な黒 (`rgba(0,0,0,0)`) に設定します。矩形の角は `(x, y)` にあり、大きさは `width` と `height` で指定されます。

### 引数

`x`

矩形領域の始点の X 座標を指定します。

`y`

矩形領域の始点の Y 座標を指定します。

`width`

矩形領域の幅を指定します。

`height`

矩形領域の高さを指定します。

例
-

### キャンバス全体の消去

このコードでは、キャンバス全体を消去します。これは一般的に、アニメーションの各フレームの開始時に必要とされます。消去される領域の寸法は `<canvas>` 要素の `width` と `height` 属性に等しくなるように設定します。

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
```

### キャンバスの一部を消去

この例では、黄色っぽい背景の上に青い三角形を描きます。そして `clearRect()` メソッドでキャンバスの一部を消去しています。

#### HTML

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

#### JavaScript

消去する領域はの形状は矩形で、左上の角が (10, 10) になっています。幅は 120、高さは 100 です。

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

// 黄色い背景を描画
ctx.beginPath();
ctx.fillStyle = "#ff6";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 青い三角形を描画
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();

// キャンバスの一部を消去
ctx.clearRect(10, 10, 120, 100);
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


CanvasRenderingContext2D.scale() - Web API

CanvasRenderingContext2D.scale()
================================

**`CanvasRenderingContext2D.scale()`** はキャンバス 2D API のメソッドで、キャンバス上の長さを縦方向および横方向に拡縮する変形を適用させます。

既定では、キャンバス上の 1 単位は正確に 1 ピクセルです。拡縮変換はこの動作を変更します。例えば、拡大係数が 0.5 の場合、単位は 0.5 ピクセルになり、図形は通常の半分の大きさで描かれます。同様に、拡大係数を 2.0 にすると、1 単位が 2 ピクセルになり、図形は通常の 2 倍の大きさで描画されます。

構文
--

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

### 引数

`x`

水平方向の拡大係数。負の値を指定すると、縦軸を跨いでピクセルを反転させます。 `1` を指定すると、水平方向には拡縮されません。

`y`

垂直方向の拡大係数。負の値を指定すると、横軸を跨いでピクセルを反転させます。 `1` を指定すると、垂直方向には拡縮されません。

例
-

### 図形を拡縮する

この例は、拡縮された長方形を描きます。比較のため、元の長方形も描かれます。

#### HTML

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

#### JavaScript

矩形は幅 8、高さ 20 で指定する。変換行列はこれを水平方向に 9 倍、垂直方向に 3 倍に拡大する。したがって、最終的なサイズは、幅 72、高さ 60 となります。

キャンバス上の位置も変わることに注意してください。角の位置の指定値が (10, 10) のため、実際の角の位置は (90, 30) になります。

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

// 拡縮された長方形
ctx.scale(9, 3);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 8, 20);

// 変形行列を単位行列に戻す
ctx.setTransform(1, 0, 0, 1, 0, 0);

// 原型の長方形
ctx.fillStyle = "gray";
ctx.fillRect(10, 10, 8, 20);
```

#### 結果

拡縮された長方形は赤、元の長方形は灰色です。

### 垂直・水平方向の反転

コンテキストを水平方向に反転させるには `scale(-1, 1)` を、垂直方向に反転させるには `scale(1, -1)` を使用します。この例では、 "Hello world!" という文字が水平に反転しています。

`fillText()` の呼び出しは負の x 座標を指定していることに注意してください。これは負の拡大係数を調整するためで、`-280 * -1` は `280` となり、テキストはその点から左方向に描画されます。

#### HTML

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

#### JavaScript

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

ctx.scale(-1, 1);
ctx.font = "48px serif";
ctx.fillText("Hello world!", -280, 90);
ctx.setTransform(1, 0, 0, 1, 0, 0);
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


CanvasRenderingContext2D: createImageData() メソッド - Web API

CanvasRenderingContext2D: createImageData() メソッド
================================================

Canvas 2D API の **`CanvasRenderingContext2D.createImageData()`** メソッドは、解像度を指定して新しい空の `ImageData` オブジェクトを生成します。新しいオブジェクトのすべてのピクセルは透明な黒です。

構文
--

```js
createImageData(width, height)
createImageData(width, height, settings)
createImageData(imagedata)
```

### 引数

`width`

新しい `ImageData` オブジェクトの幅です。負の値を設定すると、矩形が左右反転します。

`height`

新しい `ImageData` オブジェクトの高さです。負の値を指定すると、矩形が上下反転します。

`settings` 省略可

以下のプロパティを持つオブジェクトです。

* `colorSpace`: 画像データの色空間を指定します。sRGB 色空間 を表す `"srgb"`、もしくは display-p3 色空間 を表す `"display-p3"` が設定できます。

`imagedata`

幅と高さをコピーする元として用いる既存の `ImageData` オブジェクトです。画像自体はコピー**されません**。

### 返値

指定の幅と高さを持つ新しい `ImageData` オブジェクトを返します。この新しいオブジェクトは、透明な黒のピクセルで埋められています。

### 例外

`IndexSizeError` `DOMException`

引数 `width` または `height` がゼロのとき投げられます。

例
-

### 空の ImageData オブジェクトを生成する

このスニペットでは、`createImageData()` メソッドを用いて空の `ImageData` オブジェクトを生成します。

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

生成されたオブジェクトは、幅 100 ピクセル、高さ 50 ピクセルで、全部で 5,000 ピクセルからなります。`ImageData` オブジェクト内の各ピクセルは配列の 4 個の要素からなるので、このオブジェクトの `data` プロパティの要素数は 4 × 5,000 すなわち 20,000 です。

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

const imageData = ctx.createImageData(100, 50);
console.log(imageData);
// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }
```

### 空の ImageData オブジェクトを埋める

この例では、新しい`ImageData` オブジェクトを生成し、紫のピクセルで埋めます。

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

各ピクセルは 4 個の値からなるので、`for` ループではループ変数を 4 ずつ加算します。各ピクセルに対応する配列の値は、順に R (赤)、G (緑)、B (青)、A (不透明度) です。

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

// 各ピクセルを走査する
for (let i = 0; i < imageData.data.length; i += 4) {
  // ピクセルデータを書き換える
  imageData.data[i + 0] = 190; // R 値
  imageData.data[i + 1] = 0; // G 値
  imageData.data[i + 2] = 210; // B 値
  imageData.data[i + 3] = 255; // A 値
}

// 画像データをキャンバスに描画する
ctx.putImageData(imageData, 20, 20);
```

#### 結果

### 他の例

`createImageData()` や `ImageData` オブジェクトを用いる他の例については、キャンバスとピクセル操作や `ImageData.data` を参照してください。

仕様書
---

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

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

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

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasRenderingContext2D`
* `ImageData`
* キャンバスとピクセル操作


CSSConditionRule.conditionText - Web API

CSSConditionRule.conditionText
==============================

**`conditionText`** は `CSSConditionRule` インターフェイスのプロパティで、この CSS ルールのテキストを返したり設定したりします。

値
-

`CSSOMString` です。

例
-

次の例は、 `conditionText` の値を `CSSMediaRule` インターフェイスを実装した `CSSConditionRule` で取得・設定するデモを行います。

```css
@media (min-width: 500px) {
  body {
    color: blue;
  }
}
```

```js
let myRules = document.styleSheets[0].cssRules;
let text = myRules[0].conditionText;
console.log(text); // "(min-width: 500px)"
text = "(min-width: 400px)";
console.log(text); // "(min-width: 400px)"
```

仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # dom-cssconditionrule-conditiontext |

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

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

関連情報
----

* 動的なスタイル情報の使用


HTMLTextAreaElement: selectionchange イベント - Web API

HTMLTextAreaElement: selectionchange イベント
=========================================

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

**`selectionchange`** は選択 API のイベントで、`<textarea>` 要素内のテキストの選択状態が変更されたときに発生します。
 これは、文字の選択範囲の変更と、キャレットが移動した場合の両方を含みます。

このイベントはキャンセル不可です。

イベントは通常 `<textarea>` にイベントリスナーを追加することで処理され、`HTMLTextAreaElement` で読み込まれるハンドラー関数で処理されます。`selectionStart`、`selectionEnd`、`selectionDirection` プロパティで読み取ります。

グローバルな `onselectionchange` イベントハンドラーにリスナーを追加し、ハンドラー関数内で `Document.getSelection()` を使用して `Selection` を取得することも可能です。しかし、これは *テキスト* の選択範囲の変更を取得するのにはあまり有益ではありません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("selectionchange", (event) => {});

onselectionchange = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

下記の例では、`<textarea>` 要素内での選択範囲を取得する方法を紹介します。

### HTML

```html
<div>
  ここにテキストを入力して選択してください:<br /><textarea
 id="mytext"
 rows="2"
 cols="20"></textarea>
</div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>
```

### JavaScript

```js
const myinput = document.getElementById("mytext");

myinput.addEventListener("selectionchange", () => {
  document.getElementById("start").textContent = myinput.selectionStart;
  document.getElementById("end").textContent = myinput.selectionEnd;
  document.getElementById("direction").textContent = myinput.selectionDirection;
});
```

### 例

仕様書
---

| Specification |
| --- |
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |

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

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


HTMLTextAreaElement: labels プロパティ - Web API

HTMLTextAreaElement: labels プロパティ
=================================

**`HTMLTextAreaElement.labels`** は読み取り専用のプロパティで、この
 `<textarea>` 要素に関連付けられた `<label>` 要素の `NodeList` を返します。

値
-

`NodeList` で、この `<textArea>` 要素に関連付けられた `<label>` 要素が入ります。

例
-

### HTML

```html
<label id="label1" for="test">Label 1</label>
<textarea id="test">Some text</textarea>
<label id="label2" for="test">Label 2</label>
```

### JavaScript

```js
window.addEventListener("DOMContentLoaded", () => {
  const textArea = document.getElementById("test");
  for (const label of textArea.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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


HTMLTextAreaElement: select イベント - Web API

HTMLTextAreaElement: select イベント
================================

**`select`** イベントは、テキストが選択されたときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("select", (event) => {});

onselect = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

### 選択のログ

```html
<textarea>この要素内のテキストを選択してみてください。</textarea>
<p id="log"></p>
```

```js
function logSelection(event) {
  const log = document.getElementById("log");
  const selection = event.target.value.substring(
    event.target.selectionStart,
    event.target.selectionEnd,
  );
  log.textContent = `選択範囲: ${selection}`;
}

const textarea = document.querySelector("textarea");
textarea.addEventListener("select", logSelection);
```

### onselect による同等の処理

イベントハンドラーを `onselect` プロパティで設定することもできます。

```js
textarea.onselect = logSelection;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-select |
| HTML Standard # handler-onselect |

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

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


MIDIOutput: clear() メソッド - Web API

MIDIOutput: clear() メソッド
========================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIOutput` インターフェイスの **`clear()`** メソッドは、出力デバイスへの送信待ち中のメッセージのキューをクリアします。

構文
--

```js
clear()
```

### 引数

なし

### 返値

なし (`undefined`)

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midioutput-clear |

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

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


MIDIOutput: send() メソッド - Web API

MIDIOutput: send() メソッド
=======================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`MIDIOutput` インターフェイスの **`send()`** メソッドは、対応する MIDI ポートに送信するメッセージをキューに追加します。メッセージはすぐに送信することも、省略可能なタイムスタンプを用いて送信を遅延させることもできます。

構文
--

```js
send(data)
send(data, timestamp)
```

### 引数

`data`

1 個以上の有効な MIDI メッセージの列です。それぞれのエントリーが 1 バイトのデータを表します。

`timestamp` 省略可

ミリ秒単位の時刻を表す `DOMHighResTimestamp` で、メッセージを送信するまでの遅延を表現します。

### 返値

なし (`undefined`)

### 例外

`TypeError`

`data` が有効な列でないか、有効な MIDI メッセージが格納されていないとき投げられます。

`InvalidAccessError` `DOMException`

`data` がシステムエクスクルーシブメッセージで、`MIDIAccess` でシステムエクスクルーシブへのアクセスが有効になっていないとき投げられます。

`InvalidStateError` `DOMException`

ポートが切断されているとき投げられます。

例
-

以下の例では、真ん中のドのノートをすぐに送信し、1 秒後にノートオフメッセージを送信します。

```js
function sendMiddleC(midiAccess, portID) {
  const noteOnMessage = [0x90, 60, 0x7f]; // ノートオン、真ん中のド、フルベロシティー
  const output = midiAccess.outputs.get(portID);
  output.send(noteOnMessage); // タイムスタンプの省略は、すぐに送信することを意味する
  output.send([0x80, 60, 0x40], window.performance.now() + 1000.0); // timestamp = now + 1000ms
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midioutput-send |

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

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


Path2D.addPath() - Web API

Path2D.addPath()
================

Canvas 2D API の **`Path2D.addPath()`** メソッドは、パスに対して引数でパスを追加します。

構文
--
```

void path.addPath(path [, transform]);
```

### パラメーター

`path`

追加する`Path2D` (en-US)パス

`transform` 省略可

パスに追加する変換マトリックスとして使われる`SVGMatrix`.

例
-

### `addPathメソッドを使用する`

これは`addPathメソッドを使用する簡単なコードスニペットです。`

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

// rectで新しいパスを作成する
var p1 = new Path2D();
p1.rect(0, 0, 100, 100);

// rectで別のパスを作成する
var p2 = new Path2D();
p2.rect(0, 0, 100, 100);

// 右に縦300ポイント移動する変換マトリックスを作成する
var m = document
  .createElementNS("http://www.w3.org/2000/svg", "svg")
  .createSVGMatrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = 300;
m.f = 0;

// 2番目のパスを最初のパスに追加する
p1.addPath(p2, m);

// 最後に、1番目のパスをキャンバスに描画する
ctx.fill(p1);
```

以下のコードを編集して、その変更が canvas に反映されることを確かめてください(現在のブラウザーが実際にこのメソッドをサポートしているか、以下のブラウザー互換テーブルをチェックしてください)

仕様
--

| Specification |
| --- |
| HTML Standard # dom-path2d-addpath-dev |

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

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

関連情報
----

* このインターフェイスは`Path2D` (en-US)に定義されています。


Path2D() - Web API

Path2D()
========

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

**`Path2D()`** コンストラクターは、新たにインスタンス化した `Path2D` オブジェクトを返します。他のパスを引数に渡すこともできます(複製がつくられます)。また、SVG パス からなるデータを文字列で渡すこともできます。

構文
--
```

new Path2D();
new Path2D(path);
new Path2D(d);
```

### 引数

`path` 省略可

他の`Path2D` オブジェクトを渡して呼び出すと、引数の `path` が複製されます。

`d` 省略可

SVG パス からなる文字列を渡して呼出すと、その内容のパスが新たにつくられます。

例
-

### パスを複製してつくる

これは、`Path2D` のパスを複製して作成する簡単なコードスニペットです。
```

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

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

let path1 = new Path2D();
path1.rect(10, 10, 100, 100);

let path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 \* Math.PI);

ctx.stroke(path2);
```

### SVG パスを使用する

これは、SVG パスデータ を使用して `Path2D` のパスを作成する簡単なコードスニペットです。パスは点 (`M10 10`) に移ってから、水平に 80 ポイント右に移動し (`h 80`)、80 ポイント下がり (`v 80`)、80 ポイント左に移動し (`h -80`)、開始点に戻ります (`z`)。
```

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

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

let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);
```

仕様
--

| Specification |
| --- |
| HTML Standard # dom-path2d-dev |

ブラウザー実装状況
---------

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

関連情報
----

* `Path2D` (en-US) インタフェースに、このコンストラクタは属します。


HTMLHtmlElement: version プロパティ - Web API

HTMLHtmlElement: version プロパティ
==============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**メモ:** このプロパティは、 HTML 4.01 の W3C 技術勧告で非推奨とされ、文書のバージョン情報を得るためには DTD を使用することが推奨されています。

文書の文書型定義 (DTD) に関するバージョン情報を返します。 Mozilla はこのプロパティを認識しますが、このプロパティの返値は常に空文字列です。

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

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


DOMRect: DOMRect() コンストラクター - Web API

DOMRect: DOMRect() コンストラクター
===========================

**`DOMRect()`** コンストラクターは、新しい `DOMRect` オブジェクトを作成します。

構文
--

```js
new DOMRect(x, y, width, height)
```

### 引数

`x`

この `DOMRect` の原点の `x` 座標です。

`y`

この `DOMRect` の原点の `y` 座標です。

`width`

この `DOMRect` の幅です。

`height`

この `DOMRect` の高さです。

### 返値

新しい `DOMRect` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrect-domrect |

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

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

関連情報
----

* `DOMPoint`
* `DOMRect`
* `DOMRect.fromRect()`


DOMRect: fromRect() 静的メソッド - Web API

DOMRect: fromRect() 静的メソッド
==========================

**`fromRect()`** は `DOMRect` オブジェクトの静的メソッドで、新しい `DOMRect` オブジェクトを指定した位置と寸法で作成します。

構文
--

```js
DOMRect.fromRect()
DOMRect.fromRect(rectangle)
```

### 引数

`rectangle` 省略可

矩形の位置と寸法を指定するオブジェクト。すべてのプロパティは既定で `0` です。プロパティは次の通りです。

* `x`: 矩形の左端の座標です。
* `y`: 矩形の上端の座標です。
* `width`: 矩形の幅です。
* `height`: 矩形の高さです。

### 返値

`DOMRect` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrect-fromrect |

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

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


ByteLengthQueuingStrategy: size() メソッド - Web API

ByteLengthQueuingStrategy: size() メソッド
======================================

**`size()`** は `ByteLengthQueuingStrategy` インターフェイスのメソッドで、指定されたチャンクの `byteLength` プロパティを返します。

構文
--

```js
size(chunk)
```

### 引数

`chunk`

ストリームを通して渡されるデータのチャンク。

### 返値

指定されたチャンクのバイト長を表す整数です。

例
-

```js
const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queuingStrategy,
);

const size = queueingStrategy.size(chunk);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # blqs-size |

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

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

関連情報
----

* `ByteLengthQueuingStrategy()` コンストラクター


ByteLengthQueuingStrategy: ByteLengthQueuingStrategy() コンストラクター - Web API

ByteLengthQueuingStrategy: ByteLengthQueuingStrategy() コンストラクター
===============================================================

**`ByteLengthQueuingStrategy()`** コンストラクターは、`ByteLengthQueuingStrategy` オブジェクトのインスタンスを作成して返します。

構文
--

```js
new ByteLengthQueuingStrategy(highWaterMark)
```

### 引数

以下のプロパティを持つオブジェクトです。

`highWaterMark`

背圧が適用される前に内部キューに格納することができるバイト数の合計です。

`CountQueuingStrategy()` では `highWaterMark` 引数に単純な塊の数を指定しますが、 `ByteLengthQueuingStrategy()` では、 `highWaterMark` 引数はバイト数を指定します。具体的には、チャンクのストリームが指定された場合に、背圧が適用される前に内部キューに何バイト分のチャンクを格納することができるか（チャンクの数ではありません）を指定します。

### 返値

`ByteLengthQueuingStrategy` オブジェクトのインスタンスです。。

### 例外

なし。

例
-

```js
const queuingStrategy = new ByteLengthQueuingStrategy({
  highWaterMark: 1 \* 1024,
});

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size(chunk);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # blqs-constructor |

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

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

関連情報
----

* `ByteLengthQueuingStrategy` インターフェイス


ByteLengthQueuingStrategy: highWaterMark プロパティ - Web API

ByteLengthQueuingStrategy: highWaterMark プロパティ
==============================================

**`ByteLengthQueuingStrategy.highWaterMark`** は読み取り専用プロパティで、背圧が適用される前に内部キューに格納することができる総バイト数を返します。

**メモ:** `CountQueuingStrategy()` では `highWaterMark` 引数に単純な塊の数を指定しますが、 `ByteLengthQueuingStrategy()` では、 `highWaterMark` 引数はバイト数を指定します。具体的には、チャンクのストリームが指定された場合に、背圧が適用される前に内部キューに何バイト分のチャンクを格納することができるか（チャンクの数ではありません）を指定します。

値
-

整数です。

例
-

```js
const queuingStrategy = new ByteLengthQueuingStrategy({
  highWaterMark: 1 \* 1024,
});

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queuingStrategy,
);

const size = queuingStrategy.size(chunk);
console.log(`highWaterMark value: ${queuingStrategy.highWaterMark}$`);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-blqs-high-water-mark① |

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

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

関連情報
----

* `ByteLengthQueuingStrategy()` コンストラクター


Window: getScreenDetails() - Web API

Window: getScreenDetails()
==========================

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`Window` インターフェイスの **`getScreenDetails()`** メソッドは、ユーザーのデバイスで利用できるすべての画面の詳細を表す `ScreenDetails` (en-US) オブジェクトインスタンスで満たされる `Promise` (en-US) を返します。

構文
--

```js
getScreenDetails()
```

### 引数

なし。

### 返値

`ScreenDetails` (en-US) オブジェクトインスタンスで満たされる `Promise`。

### 例外

`NotAllowedError` `DOMException`

Permissions-Policy によって Window Management API (en-US) の使用がブロックされている場合、またはユーザーが明示的にブラウザのパーミッションリクエストを拒否した場合にスローされます。

例
-

`getScreenDetails()` が呼び出されると、ユーザーに対してすべてのディスプレイでウィンドウを管理する許可を求めるダイアログが表示されます（この許可の状態は、`window-management` をクエリーするために `Permissions.query()` を使用して確認できます）。許可が与えられた場合、結果として得られる `ScreenDetails` (en-US) オブジェクトには、ユーザーのシステムで利用可能なすべてのスクリーンの詳細が含まれています。

以下の例では、利用可能な各ディスプレイ上でフルサイズのウィンドウが開きます。

```js
const screenDetails = await window.getScreenDetails();

// 端末で使用可能のすべてのスクリーンに対して、フルスクリーンのウィンドウを開きます
for (const screen of screenDetails.screens) {
  window.open(
    "https://example.com",
    "\_blank",
    `left=${screen.availLeft},
 top=${screen.availTop},
 width=${screen.availWidth},
 height=${screen.availHeight}`,
  );
}
```

**メモ:** 完全な例については、マルチウィンドウ学習環境を参照してください(ソースコードも参照してください。)

仕様書
---

| Specification |
| --- |
| Window Management # api-window-getScreenDetails-method |

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

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

関連情報
----

* Window Management API (en-US)


Window.blur() - Web API

Window.blur()
=============

ウィンドウからフォーカスを外します。

構文
--

```js
blur();
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
window.blur();
```

メモ
--

window.blur() メソッドは、プログラム的にユーザーが現在のウィンドウからフォーカスを移した場合に等価です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-blur |

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

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


Window.sizeToContent() - Web API

Window.sizeToContent()
======================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`Window.sizeToContent()`** メソッドは、ウィンドウの大きさを内容に合わせて変更します。動作するには、この関数が呼び出された時点で DOM コンテンツの読み込みが完了している必要があります。例えば、`DOMContentLoaded` イベントが発行された後です。

Firefox 20 以降では、ウィンドウの最小サイズを制限することで、ウィンドウが小さすぎてユーザーが操作しづらくなることを防いでいます。

構文
--

```js
sizeToContent();
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
window.sizeToContent();
```

仕様書
---

この機能は仕様書に含まれていません。

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

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

関連情報
----

* `Window`


Window: unload イベント - Web API

Window: unload イベント
===================

**警告:** 開発者はこのイベントを使用するのを避けてください。下記の「使用上のメモ」を参照してください。

**`unload`** イベントは、文書または子リソースがアンロードされるときに発生します。

以下のイベントの後に発生します。

* `beforeunload` (キャンセル可能なイベント)
* `pagehide`

文書は以下のような状態にあります。

* すべてのリソースがまだ存在する（img、iframe など）
* エンドユーザーから見えるものは何もない
* UI 操作の効果がない（`window.open`, `alert`, `confirm`, など）
* エラーが発生しても、アンロードの処理の流れは停止しない

unload イベントは文書ツリーにも続くことに注意してください。親フレームのアンロードは、子フレームの `unload` の**前**に行われます（以下の例を参照）。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("unload", (event) => {});
onunload = (event) => {};
```

イベント型
-----

一般的な `Event` です。

イベントハンドラーの別名
------------

`Window` インターフェイスに加えて、イベントハンドラープロパティ `onunload` は以下のターゲットでも利用できます。

* `HTMLBodyElement`
* `HTMLFrameSetElement` (en-US)
* `SVGSVGElement` (en-US)
使用上のメモ
------

開発者はこのイベントを使用しないでください。

特にモバイルでは `unload` イベントが確実には発行されません。例えば、次の例では `unload` イベントはまったく発生しません。

1. モバイルユーザーがページにアクセスします。
2. その後、ユーザーが異なるアプリに切り替えます。
3. その後、ユーザーがアプリマネージャーからブラウザーを閉じます。

また、 `unload` イベントは前方/後方キャッシュ (bfcache) と互換性がありません。このイベントを使用している多くのページは、イベントが発生した後はページが存在し続けないことを想定しているからです。これに対抗するため、いくつかのブラウザー（Firefox など）は unload リスナーがある場合、ページを bfcache に配置しませんが、これはパフォーマンスにとって悪いことです。他にも、 Chrome のように、ユーザーが操作しても `unload` を発行しないものもあります。

ユーザーのセッションの終わりを指示するために使用するのに最適なイベントは `visibilitychange` イベントです。 `visibilitychange` に対応していないブラウザーでは、 `pagehide` イベントが次善の選択肢となります。

ページのアンロードイベントを検出する場合は、 `pagehide` イベントを待ち受けするのがベストです。

`unload` イベントに関連する問題についての詳しい情報は、ページライフサイクル API ガイドを参照してください。

例
-

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Parent Frame</title>
    <script>
 window.addEventListener("beforeunload", (event) => {
 console.log("I am the 1st one.");
 });
 window.addEventListener("unload", (event) => {
 console.log("I am the 3rd one.");
 });
 </script>
  </head>
  <body>
    <iframe src="child-frame.html"></iframe>
  </body>
</html>
```

`child-frame.html` の内容を以下に示します。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Child Frame</title>
    <script>
 window.addEventListener("beforeunload", (event) => {
 console.log("I am the 2nd one.");
 });
 window.addEventListener("unload", (event) => {
 console.log("I am the 4th and last one…");
 });
 </script>
  </head>
  <body>
    ☻
  </body>
</html>
```

親フレームがアンロードされると、 `console.log()` のメッセージに記述された順序でイベントが発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # event-unload |
| HTML Standard # handler-window-onunload |

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

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

関連情報
----

* 関連イベント: `DOMContentLoaded`, `readystatechange`, `load`
* Unloading Documents — unload a document
* `visibilitychange` イベント
* Don't lose user and app state, use Page Visibility は、 `beforeunload`/`unload` ではなく、 `visibilitychange` を使用する理由について詳しく説明しています。
* Page Lifecycle API は、ウェブアプリケーションでページのライフサイクル動作を処理するための最善の手法を提供します。
* PageLifecycle.js: ページのライフサイクル動作におけるブラウザー間の不整合に対処する JavaScript ライブラリーです。
* Back/forward cache は前方/後方キャッシュとは何か、そして様々なページライフサイクルイベントに対するその意味について説明しています。


Window.showDirectoryPicker() - Web API

Window.showDirectoryPicker()
============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`Window` インターフェイスの **`showDirectoryPicker()`** メソッドは、ユーザーがディレクトリーを選択できるディレクトリーピッカーを表示します。

構文
--

```js
showDirectoryPicker()
```

### 引数

`options` 省略可

以下のオプションを含むオブジェクトです。

`id`

ID を指定することで、ブラウザーは ID ごとに異なるディレクトリーを記憶することができます。他のピッカーで同じ ID を用いると、同じディレクトリーでピッカーが開きます。

`mode`

文字列です。ディレクトリーへの読み取り専用アクセスを表す `"read"` または、読み書きアクセスを表す `"readwrite"` を指定します。デフォルトは `"read"` です。

`startIn`

ダイアログを開く場所を指定する `FileSystemHandle` またはウェルノウンディレクトリー (`"desktop"`、`"documents"`、`"downloads"`、`"music"`、`"pictures"`、`"videos"` のいずれか) です。

### 返値

`FileSystemDirectoryHandle` で解決する `Promise` を返します。

### 例外

`AbortError`

ユーザーが選択せずにプロンプトを閉じた場合や、選択されたものをユーザーエージェントがセンシティブや危険だとみなした場合、投げられます。

セキュリティ
------

ユーザーによる一時的な有効化が必要です。この機能が動作するためには、ユーザーがページまたは UI 要素を操作することが必要です。

例
-

この非同期関数は、ディレクトリーピッカーを表示し、選択されたら `FileSystemDirectoryHandle` を返します。

```js
async function getDir() {
  const dirHandle = await window.showDirectoryPicker();

  // dirHandle を扱うコードを実行する
}
```

仕様書
---

| Specification |
| --- |
| File System Access # api-showdirectorypicker |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


Window: vrdisplaydeactivate イベント - Web API

Window: vrdisplaydeactivate イベント
================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`vrdisplaydeactivate`** は WebVR API のイベントで、 HMD が一定時間使用されないためにスタンバイまたはスリープモードになった場合など、VR ディスプレイを表示することができなくなったときに発行されます。

**メモ:** このイベントは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("vrdisplaydeactivate", (event) => {});

onvrdisplaydeactivate = (event) => {};
```

イベント型
-----

`VRDisplayEvent` です。 `Event` を継承しています。

イベントプロパティ
---------

*`VRDisplayEvent` は親オブジェクトである `Event` からプロパティを継承しています。*

`VRDisplayEvent.display`
非推奨
 読取専用

このイベントに関連付けられた `VRDisplay` です。

`VRDisplayEvent.reason`
非推奨
 読取専用

このイベントが発生した理由を人間可読な形で示します。

例
-

`vrdisplaydeactivate` イベントは `addEventListener` メソッドで使用することができます。

```js
window.addEventListener("vrdisplaydeactivate", () => {
  info.textContent = "Display deactivated.";
  reportDisplays();
});
```

または、 `onvrdisplaydeactivate` イベントハンドラープロパティを使用してください。

```js
window.onvrdisplaydeactivate = () => {
  info.textContent = "Display deactivated.";
  reportDisplays();
};
```

仕様書
---

このイベントは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


window.alert - Web API

window.alert
============

**`Window.alert()`** は、任意のメッセージを含むダイアログを表示し、ユーザーがそのダイアログを閉じるまで待機します。

一部の条件下（ユーザーがタブを切り替えた場合など）では、ブラウザーが実際にダイアログを表示しない場合や、ユーザーがダイアログを閉じるのを待たない場合があります。

構文
--

```js
alert()
alert(message)
```

### パラメーター

`message` 省略可

ダイアログに表示したい文字列、または、文字列に変換されて表示されるオブジェクト。

### 戻り値

なし（`undefined`）

例
-

```js
window.alert("Hello world!");
alert("Hello world!");
```

いずれも、以下のように表示されます。

![黒いダイアログボックス。左上の小さな丸いアイコンに続いて、白い開き括弧と閉じ括弧があり、白いテキスト「JavaScript Application」が含まれています。その下の左側には「Hello world!」という白いテキストがあります。そして、右下には小さな水色のボタンがあります。ボタンのテキストは黒で「OK」です](/ja/docs/Web/API/Window/alert/alerthelloworld.png)

注意事項
----

ダイアログは、ユーザー側からの応答を必要としないメッセージのために使われるべきです。

ダイアログボックスはモーダルウィンドウです。ダイアログボックスを閉じるまで、ユーザーはプログラムの他の部分にアクセスすることができません。このため、ダイアログボックス (もしくは、モーダルウィンドウ) を生成する関数を過度に使用すべきではありません。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-alert-dev |

関連情報
----

* `<dialog>` element
* `confirm`
* `prompt`


window.parent - Web API

window.parent
=============

概要
--

現在のウィンドウ、または、サブフレームの親ウィンドウへの参照を返します。

ウィンドウが親を持たない場合、`parent` プロパティは、それ自身への参照となります。

ウィンドウが `<iframe>` 、`<object>` 、あるいは、`<frame>` で読み込まれた場合、その親ウィンドウは、ウィンドウを埋め込んだ要素が存在するウィンドウとなります。

構文
--
```

parentWindow = window.parent
```

例
-

```js
if (window.parent !== window.top) {
  // 1 段下より深いところ
}
```

仕様
--

* HTML Standard
関連情報
----

* `window.frameElement` - `window` が埋め込まれた（`<iframe>` 要素などの）特定の要素を返す
* `window.top` - 最上位ウィンドウへの参照を返す


window.close - Web API

window.close
============

**`Window.close()`** メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。

このメソッドが許可されるのは、`window.open()` メソッドを用いたスクリプトにより開かれたウィンドウに対する呼び出しのみです。ウィンドウがスクリプトにより開かれたものでない場合、次のようなエラーがコンソールに表示されます: `スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。`

構文
--
```

window.close();
```

例
-

### `window.open()` で開かれたウィンドウを閉じる

この例は、ウィンドウを開くメソッドと、そのウィンドウを閉じるメソッドです。これは、`window.open()` の呼び出しにより開かれたウィンドウを閉じる `Window.close()` の使い方を実演します。

```js
//開いたウィンドウへの参照を保持するグローバル変数
var openedWindow;

function openWindow() {
  openedWindow = window.open("moreinfo.htm");
}

function closeOpenedWindow() {
  openedWindow.close();
}
```

### 現在のウィンドウを閉じる

以前は、`window` **インスタンス**の `close()` を呼び出す代わりに `window` オブジェクトの `close()` メソッドを直接呼び出した場合、ブラウザは、スクリプトで開いたウィンドウであるかどうかに関わらず、最前面のウィンドウを閉じていました。セキュリティ上の理由により、スクリプトにより開いたものでないウィンドウを閉じることは許可されなくなりました (Firefox 46.0.1: スクリプトは、そのスクリプトが開いたものでないウィンドウを閉じることができません)。

```js
function closeCurrentWindow() {
  window.close();
}
```

仕様
--

| Specification |
| --- |
| HTML Standard # dom-window-close-dev |

ブラウザーの実装状況
----------

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


Window.history - Web API

Window.history
==============

`Window.history` は読み取り専用プロパティで、 `History` オブジェクトへの参照を返します。これはブラウザーの*セッション履歴* (現在のページが読み込まれているタブまたはフレームで訪れたことがあるページ群) を操作するためのインターフェイスを提供します。

詳細や使用例については、ブラウザーの履歴の操作をご覧ください。特に、このページでは `pushState()` メソッドと `replaceState()` メソッドについて、使用する前に気を付けなければならないセキュリティ上の特性を説明しています。

例
-

```js
history.back(); // 戻るボタンを押すのと同等
history.go(-1); // history.back(); と同等
```

注
-

最上位ページにおいて `History` オブジェクトを通してアクセスできるセッション履歴のページリストは、ブラウザーの「戻る」や「次へ」ボタンの隣にあるドロップダウンで確認することができます。

セキュリティ上の理由から、 `History` オブジェクトでは権限のないコードがセッション履歴内の他のページの URL にアクセスすることを禁止していますが、セッション履歴の中を移動することは許可しています。

権限のないコードから、セッション履歴を消去したり、前後への移動を無効にしたりする方法はありません。実現可能な最も近い解決策は、 `location.replace()` メソッドでセッション履歴の現在の項目を指定された URL で置き換えることです。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-history-interface |

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

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


Window: online イベント - Web API

Window: online イベント
===================

**`online`** は `Window` インターフェイスのイベントで、ブラウザーがネットワークにアクセスできるようになり、 `Navigator.onLine` の値が `true` に切り替わると発行されます。

**メモ:** このイベントは、特定のウェブサイトの利用可能性を判断するために使用されるべきではありません。ネットワークの問題やファイアウォールが原因で、そのウェブサイトに到達できない可能性があります。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("online", (event) => {});
ononline = (event) => {};
```

イベント型
-----

一般的な `Event` です。

イベントハンドラーの別名
------------

`Window` インターフェイスに加え、 `ononline` イベントハンドラープロパティは以下のターゲットでも使用できます。

* `HTMLBodyElement`
* `HTMLFrameSetElement` (en-US)
* `SVGSVGElement` (en-US)
例
-

```js
// addEventListener 版
window.addEventListener("online", (event) => {
  console.log("You are now connected to the network.");
});

// ononline 版
window.ononline = (event) => {
  console.log("You are now connected to the network.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-online |
| HTML Standard # handler-window-ononline |

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

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

関連情報
----

* `offline`


Window: blur イベント - Web API

Window: blur イベント
=================

**`blur`** イベントは、要素がフォーカスを失ったときに発生します。

`blur` の反対は `focus` です。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `FocusEvent` |
| イベントハンドラープロパティ | `onblur` |
| 同期 / 非同期 | 同期 |
| Composed | はい |

例
-

### ライブデモ

この例ではフォーカスを失ったときに文書の外見を変更します。 `addEventListener()` を使用して `focus` および `blur` イベントを監視します。

#### HTML

```html
<p id="log">Click on this document to give it focus.</p>
```

#### CSS

```css
.paused {
  background: #ddd;
  color: #555;
}
```

#### JavaScript

```js
function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

const log = document.getElementById("log");

window.addEventListener("blur", pause);
window.addEventListener("focus", play);
```

#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

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

このイベントが処理されている間、 `Document.activeElement` の値はブラウザーによって異なります (Firefox バグ 452307)。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の `body` を設定します。

関連情報
----

* 関連イベント: `focus`
* `Element` を対象としたこのイベント: `blur` イベント


Window: locationbar プロパティ - Web API

Window: locationbar プロパティ
=========================

`locationbar` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-locationbar-dev |

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

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

関連情報
----

* `window.menubar`
* `window.personalbar`
* `window.scrollbars`
* `window.statusbar`
* `window.toolbar`


Window: opener プロパティ - Web API

Window: opener プロパティ
====================

`Window` インターフェイスの **`opener`** プロパティは、 `open()` によって、または `target` 属性の付いたリンクの操作によって開かれたウィンドウを開いたウィンドウへの参照を返します。

言い換えれば、ウィンドウ `A` がウィンドウ `B` を開いた場合、 `B.opener` は `A` を返します。

値
-

`Window` 風のオブジェクトで、（`window.open()` を使用するか、または `target` 属性が設定されたリンクによって）現在のウィンドウを開いたウィンドウ（オープナー）を参照します。このウィンドウが他のウィンドウにリンクされたり作成されたりして開かれたものでない場合は `null` を返します。

オープナーが現在のページと同じオリジン上にない場合、オープナーオブジェクトの機能は制限されます。例えば、ウィンドウオブジェクトの変数と関数はアクセスすることができません。しかし、オープナーウィンドウのナビゲーションは利用可能です。これは、開かれたページが元のタブやウィンドウで URL を開くためのものであることを意味しています。場合によっては、これによりフィッシング攻撃が可能であり、元のウィンドウで開かれた信頼できるページが、新しく開かれたページによってフィッシングページに置き換えられてしまいます。

以下の場合、ブラウザーは `window.opener` を生成せず、 `null` のままにします。

* リンクに `rel=noopener` を指定するか、 `noopener` を `windowFeatures` 引数に渡すことで、オープナーを消すことができます。
* `target` が `_blank` であるリンクによって開かれたウィンドウは、明示的に `rel=opener` を要求しない限り、 `opener` になることはありません。
* 値が `same-origin` である `Cross-Origin-Opener-Policy` ヘッダーがあると、 `opener` を設定することができません。新しいウィンドウは異なる閲覧コンテキストで読み込まれるので、開くためのウィンドウを参照することはありません。
仕様書
---

| Specification |
| --- |
| HTML Standard # dom-opener-dev |

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

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


Window.innerHeight - Web API

Window.innerHeight
==================

**`innerHeight`** は `Window` インターフェイスの読み取り専用プロパティで、ウィンドウの内部の高さをピクセル単位で返します。水平スクロールバーがあれば、その高さを含みます。

`innerHeight` の値はウィンドウのレイアウトビューポート (en-US)の高さから取られます。幅は `innerWidth` プロパティを使用して取ることができます。

値
-

整数値で、ウィンドウのレイアウトビューポートの高さをピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。

ウィンドウの幅を変更するには、 `resizeTo()` や `resizeBy()` などの寸法変更メソッドの一つを呼び出してください。

使用上の注意
------

ウィンドウから水平スクロールバーや境界を引いた高さを取得するには、ルートの `<html>` 要素の `clientHeight` プロパティを代わりに使用してください。

`innerHeight` および `innerWidth` はすべてのウィンドウと、ウィンドウのように動作するすべてのオブジェクト、例えばタブやフレームで利用できます。

例
-

### フレームセットの想定

```js
console.log(window.innerHeight); // または

console.log(self.innerHeight);
// フレームセット内にあるフレームのビューポートの高さを返します

console.log(parent.innerHeight);
// 最も近いフレームセットのビューポートの高さを返します

console.log(top.innerHeight);
// もっとも外側のフレームセットのビューポートの高さを返します
```

ウィンドウの寸法を変更するには、 `window.resizeBy()` と `window.resizeTo()` を参照してください。

ウィンドウの外形の高さ、すなわちブラウザーウィンドウ全体の高さを取得するには、 `window.outerHeight` を参照してください。

### 図の例

以下の図は `outerHeight` と `innerHeight` の違いを示しています。

![innerHeight と outerHeight の説明](/ja/docs/Web/API/Window/innerHeight/firefoxinnervsouterheight2.png)

デモ
--

### HTML

```html
<p>
  ブラウザーウィンドウの大きさを変更すると
  <code>resize</code> イベントが発生します。
</p>
<p>ウィンドウの高さ: <span id="height"></span></p>
<p>ウィンドウの幅: <span id="width"></span></p>
```

### JavaScript

```js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function resizeListener() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.addEventListener("resize", resizeListener);
```

### 結果

別なページでデモコードの実行結果を見ることもできます。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-innerheight |

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

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

関連情報
----

* `window.innerWidth`
* `window.outerHeight`
* `window.outerWidth`


Window: hashchange イベント - Web API

Window: hashchange イベント
=======================

**`hashchange`** イベントは、 URL のフラグメント識別子 (URL の `#` 記号で始まり続く部分) が変化したときに発生します。

|  |  |
| --- | --- |
| バブリング | あり |
| キャンセル | 不可 |
| インターフェイス | `HashChangeEvent` |
| イベントハンドラープロパティ | `onhashchange` |

例
-

`hashchange` イベントは `addEventListener` メソッドの中で使用することができます。

```js
window.addEventListener(
  "hashchange",
  function () {
    console.log("The hash has changed!");
  },
  false,
);
```

または `onhashchange` イベントハンドラープロパティを使用して、

```js
function locationHashChanged() {
  if (location.hash === "#cool-feature") {
    console.log("You're visiting a cool feature!");
  }
}

window.onhashchange = locationHashChanged;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-hashchange |
| HTML Standard # handler-window-onhashchange |

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

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

関連情報
----

* `popstate`
* `WindowEventHandlers.onhashchange`


Window: beforeunload イベント - Web API

Window: beforeunload イベント
=========================

**`beforeunload`** イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 可 |
| インターフェイス | `Event` |
| イベントハンドラー | `onbeforeunload` |

このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。

仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの `preventDefault()` を呼び出すことになっています。

しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。

* イベントの `returnValue` プロパティに文字列を代入する
* イベントハンドラーから文字列を返す

一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、これは非推奨であり、すでに多くのブラウザーが対応していません。

望ましくないポップアップに対処するために、ブラウザーはページが操作されていない限り、 `beforeunload` のイベントハンドラーで生成したプロンプトを表示しなかったり、全くプロンプトを表示しなかったりする可能性があります。

イベントハンドラー/リスナーを `window` または`document` の `beforeunload` イベントに割り当てると、ブラウザーはメモリ内のページナビゲーションキャッシュ、例えば Firefox の Back-Forward キャッシュや WebKit のページキャッシュなどを使用することを防ぎます。

HTML 仕様書は `window.alert()`, `window.confirm()`, `window.prompt()` などのメソッドが、このイベントの実行中には無視されることがあることを示しています。詳しくは、 HTML 仕様書をご覧ください。

例
-

HTML の仕様では、 `Event.returnValue` を使用する代わりに `Event.preventDefault()` メソッドを使用する必要があります。ただし、これはすべてのブラウザーで対応しているわけではありません。

```js
window.addEventListener("beforeunload", (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = "";
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-beforeunload |
| HTML Standard # handler-window-onbeforeunload |

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

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

関連情報
----

* 関連イベント: `DOMContentLoaded`, `readystatechange`, `load`, `unload`
* Unloading Documents — Prompt to unload a document
* Remove Custom Messages in onbeforeload Dialogs after Chrome 51


Window.screenY - Web API

Window.screenY
==============

**`Window.screenY`** は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直距離を CSS ピクセル数で返します。

**メモ:** `screenY` の別名である `Window.screenTop` (en-US) が、最近は新しいブラウザー間で実装されていました。これはもともと IE のみが対応していましたが、有名であるためあらゆる場所で導入されています。

構文
--

```js
topWindowPos = window.screenY;
```

### 返値

ブラウザーのビューポートの上端から画面の上端までの CSS ピクセル数に等しい数値です。

例
-

screenleft-screentop の例では、円が描かれたキャンバスを見ることができます。この例では、 `Window.screenLeft` (en-US)/`Window.screenTop` (en-US) に加えて `Window.requestAnimationFrame()` を使用することで、ウィンドウの位置を移動しても画面上の一定の物理的な位置に円を描き続けます。

```js
initialLeft = window.screenLeft + canvasElem.offsetLeft;
initialTop = window.screenTop + canvasElem.offsetTop;

function positionElem() {
  let newLeft = window.screenLeft + canvasElem.offsetLeft;
  let newTop = window.screenTop + canvasElem.offsetTop;

  let leftUpdate = initialLeft - newLeft;
  let topUpdate = initialTop - newTop;

  ctx.fillStyle = "rgb(0, 0, 0)";
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = "rgb(0, 0, 255)";
  ctx.beginPath();
  ctx.arc(
    leftUpdate + width / 2,
    topUpdate + height / 2 + 35,
    50,
    degToRad(0),
    degToRad(360),
    false,
  );
  ctx.fill();

  pElem.textContent =
    "Window.screenLeft: " +
    window.screenLeft +
    ", Window.screenTop: " +
    window.screenTop;

  window.requestAnimationFrame(positionElem);
}

window.requestAnimationFrame(positionElem);
```

これは `screenX`/`screenY` でもまったく同じように動作します。

 また、このコードでは `screenLeft` に対応しているかどうかを検出するスニペットが入っており、対応していない場合は `screenLeft`/`screenTop` を
 `screenX`/`screenY` で代替するようになっています。

```js
if (!window.screenLeft) {
  window.screenLeft = window.screenX;
  window.screenTop = window.screenY;
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-screeny |

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

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

関連情報
----

* `window.screenTop` (en-US)
* `window.screenX`


Window: personalbar プロパティ - Web API

Window: personalbar プロパティ
=========================

`personalbar` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-personalbar-dev |

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

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

関連情報
----

* `window.locationbar`
* `window.menubar`
* `window.scrollbars`
* `window.statusbar`
* `window.toolbar`


Window: offline イベント - Web API

Window: offline イベント
====================

**`offline`** は `Window` インターフェイスのイベントで、ブラウザーがネットワークへのアクセスを失い、 `Navigator.onLine` の値が `false` に切り替わったときに発行されます。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("offline", (event) => {});
onoffline = (event) => {};
```

イベント型
-----

一般的な `Event` です。

イベントハンドラーの別名
------------

`Window` インターフェイスに加え、 `onoffline` イベントハンドラープロパティは以下のターゲットでも使用できます。

* `HTMLBodyElement`
* `HTMLFrameSetElement` (en-US)
* `SVGSVGElement` (en-US)
例
-

```js
// addEventListener 版
window.addEventListener("offline", (event) => {
  console.log("The network connection has been lost.");
});

// onoffline 版
window.onoffline = (event) => {
  console.log("The network connection has been lost.");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-offline |
| HTML Standard # handler-window-onoffline |

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

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

関連情報
----

* `online`


Window: toolbar プロパティ - Web API

Window: toolbar プロパティ
=====================

`toolbar` オブジェクトを返します。

これは `Window` プロパティのうちの論理値を持つ `visible` プロパティの 1 つであり、ウェブブラウザーのユーザーインターフェイスの特定の部分が可視であるかどうかを表すものでした。

プライバシーと相互運用性の理由から、これで `visible` プロパティの値は、この `Window` がポップアップの場合は `false` となり、そうでない場合は `true` となるようになりました。

構文
--

単一のプロパティを持つオブジェクトです。

`visible` 読取専用

論理値のプロパティで、 `false` は `Window` がポップアップの場合、 `true` はそれ以外を表します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-window-toolbar-dev |

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

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

関連情報
----

* `window.locationbar`
* `window.menubar`
* `window.personalbar`
* `window.scrollbars`
* `window.statusbar`


window.top - Web API

window.top
==========

ウィンドウ階層における最上位のウィンドウへの参照を返します。

構文
--
```

var topWindow = window.top;
```

注記
--

`window.parent` プロパティは、現在のウィンドウの直近の親を返しますが、`window.top` は、ウィンドウオブジェクトの階層における最上位のウィンドウを返します。

このプロパティは、親、あるいは、階層になっているウィンドウのサブフレーム内にあるウィンドウを扱っていて、最上位のフレームセットを取得したいときに特に役立ちます。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-top-dev |

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

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


Window.outerHeight - Web API

Window.outerHeight
==================

**`Window.outerHeight`** は読み取り専用のプロパティで、サイドバー、ウィンドウの操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザーウィンドウ全体の高さをピクセル単位で表します。

メモ
--

ウィンドウの大きさを変更するには、 `window.resizeBy()` および `window.resizeTo()` を使用してください。

ウィンドウの内側の高さ、つまりページが表示される高さを取得するには、 `window.innerHeight` を使用してください。

### 図による例示

以下の図は、 `outerHeight` と `innerHeight` の違いを示しています。

![innerHeight vs outerHeight illustration](/ja/docs/Web/API/Window/outerHeight/firefoxinnervsouterheight2.png)

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-outerheight |

ブラウザーの対応
--------

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

関連情報
----

* `window.innerHeight`
* `window.innerWidth`
* `window.outerWidth`
* `window.resizeBy()`
* `window.resizeTo()`


Window.scrollByLines() - Web API

Window.scrollByLines()
======================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`Window.scrollByLines()`** メソッドは、指定された行数だけ文書をスクロールさせます。

構文
--

```js
window.scrollByLines(lines);
```

### 引数

* `lines` は文書をスクロールする行数です。これは正または負の整数を指定することができます。
例
-

```html
<!-- 文書を 5 行だけ上方向にスクロールする -->
<button id="scroll-up" onclick="scrollByLines(-5);">Up 5 lines</button>

<!-- 文書を 5 行だけ下方向にスクロールする -->
<button id="scroll-down" onclick="scrollByLines(5);">Down 5 lines</button>
```

仕様書
---

どの仕様書にもありません。

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

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

関連情報
----

* `window.scroll()`
* `window.scrollBy()`
* `window.scrollByPages()`
* `window.scrollTo()`


Window.outerWidth - Web API

Window.outerWidth
=================

**`Window.outerWidth`** は読み取り専用のプロパティで、ブラウザーウィンドウの外側の幅を返します。これはサイドバー (展開されている場合)、ウィンドウの操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザーウィンドウ全体の幅を表します。

メモ
--

ウィンドウの大きさを変更するには、 `window.resizeBy()` および `window.resizeTo()` を参照してください。

ウィンドウの内側の幅、つまりページが表示される幅を取得するには、 `window.innerWidth` を参照してください。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-window-outerwidth |

ブラウザーの対応
--------

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

関連情報
----

* `window.outerHeight`, `window.innerHeight`, `window.innerWidth`
* `window.resizeBy()`, `window.resizeTo()`