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

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

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

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

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

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

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

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

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

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

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

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

**`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`