recursal/MDN huggingface dataset:
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
=================================================

**`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() メソッド
===========================================

`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()
======================================

`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 プロパティ
===========================================

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

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

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()
==============================

**`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()
====================================

**`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()
================================

**`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() メソッド
================================================

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
==============================

**`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 イベント
=========================================

**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 プロパティ
=================================

**`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 イベント
================================

**`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() メソッド
========================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (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.