Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Offscreen canvas

メモ: この機能はウェブワーカー内で利用可能です。

<canvas> 要素、あるいはキャンバス API を使用すると、レンダリングとアニメーション、ユーザー操作は通常、ウェブアプリケーションのメインスレッドの実行で発生します。 キャンバスのアニメーションとレンダリングに関連する計算はアプリケーションのパフォーマンスに影響を受ける場合があります。

OffscreenCanvas インターフェイスは画面外にレンダリングできるキャンバスを提供し、 DOM とキャンバス API を切り離すことで、 <canvas> 要素が完全に DOM に依存しなくなります。 レンダリングの操作はワーカーコンテキストでも実行することができるので、一部のタスクを別のスレッドで実行させて、メインスレッドに負荷の高い処理を回避させることもできます。

OffscreenCanvas は移譲可能オブジェクトです。

EventTarget OffscreenCanvas

Canvas・グラフィクス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
OffscreenCanvas
69
79
105
16.4
69
16.4
transferControlToOffscreen

HTMLCanvasElement.transferControlToOffscreen() メソッドは、メインスレッドまたはワーカーの OffscreenCanvas オブジェクトへ制御を委譲します。
69
79
105
16.4
69
16.4
convertToBlob

OffscreenCanvas.convertToBlob() メソッドは、このキャンバスに含まれる画像を表す Blob オブジェクトを作成します。
69
79
105
16.4
69
16.4
convertToBlob (option type parameter webp)

option.type`パラメータは `"image/webp"` をサポートする。
69
79
105
69
getContext

OffscreenCanvas.getContext() メソッドは、オフスクリーンキャンバスの描画コンテキストを返します。コンテキスト識別子が対応していない場合、またはオフスクリーンキャンバスがすでに別のコンテキストモードに設定されている場合は null を返します。
69
79
105
16.4
69
16.4
getContext (2d context)

2d` コンテキスト
69
79
105
16.4
69
16.4
getContext (bitmaprenderer context)

ビットマップレンダラ`コンテキスト
76
79
105
16.4
76
16.4
getContext (webgl context)

webgl` コンテキスト
69
79
105
17
69
17
getContext (webgl2 context)

webgl2` コンテキスト
69
79
105
17
69
17
height

height プロパティは、 OffscreenCanvas オブジェクトの幅を返したり設定したりします。
69
79
105
16.4
69
16.4
OffscreenCanvas

OffscreenCanvas() コンストラクターは、新しい OffscreenCanvas オブジェクトを生成します。
69
79
105
16.4
69
16.4
transferToImageBitmap

OffscreenCanvas.transferToImageBitmap() メソッドは、この OffscreenCanvas の最後にレンダリングされた画像から ImageBitmap オブジェクトを作成します。この OffscreenCanvas は、その後のレンダリング用に新しい画像を割り当てます。
69
79
105
16.4
69
16.4
width

width プロパティは、 OffscreenCanvas オブジェクトの幅を返したり設定したりします。
69
79
105
16.4
69
16.4
OffscreenCanvasRenderingContext2D

OffscreenCanvasRenderingContext2D インターフェイスは、OffscreenCanvas オブジェクトのビットマップに描画するための CanvasRenderingContext2D レンダリング コンテキストです。 これは CanvasRenderingContext2D オブジェクトに似ていますが、次のような違いがあります。
69
79
105
16.4
69
16.4
arc

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

CanvasRenderingContext2D.arcTo() はキャンバス 2D APIのメソッドで、制御点と半径を指定して現在のサブパスに円弧を追加します。 円弧は、例えば始点と制御点が一直線上にある場合など、必要に応じてパスの最新点に自動的に直線で接続されます。
69
79
105
16.4
69
16.4
beginPath

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

CanvasRenderingContext2D.bezierCurveTo() は キャンバス2D API のメソッドで、現在のサブパスに 3 次ベジェ曲線を追加します。このメソッドでは 3 つの点が要求されます。最初の 2 つは制御点であり、 3 つ目は終了点です。始点は現在のパスの最新の点で、ベジェ曲線を作成する前に CanvasRenderingContext2D.moveTo を使用して変更することができます。
69
79
105
16.4
69
16.4
canvas

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

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

CanvasRenderingContext2D.clip() はキャンバス 2D API のメソッドで、現在のパスまたは指定されたパスを現在のクリッピング領域に変更します。前回のクリッピング領域があれば、現在のパスまたは指定されたパスと交差して新しいクリッピング領域を作成します。
69
79
105
16.4
69
16.4
closePath

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

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

CanvasRenderingContext2D.createLinearGradient() は Canvas 2D API のメソッドで、指定された2つの座標を結ぶ直線に沿ってグラデーションを作成します。
69
79
105
16.4
69
16.4
createPattern

CanvasRenderingContext2D.createPattern() はキャンバス 2D API のメソッドで、指定された画像と繰り返しを使ってパターンを作成します。 このメソッドは CanvasPattern を返します。
69
79
105
16.4
69
16.4
createRadialGradient

CanvasRenderingContext2D.createRadialGradient() はキャンバス 2D API のメソッドで、2 つの円のサイズと座標を使って放射グラデーションを作成します。
69
79
105
16.4
69
16.4
direction

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

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

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

CanvasRenderingContext2D.fill() はキャンバス 2D API のメソッドで、現在のパスまたは指定されたパスを現在の CanvasRenderingContext2D.fillStyle で塗りつぶします。
69
79
105
16.4
69
16.4
fillRect

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

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

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

CanvasRenderingContext2D.filter はキャンバス 2D API のプロパティで、ぼかしやグレースケール化などのフィルター効果を提供します。 これは CSS の filter プロパティに似ており、同じ値を受け付けます。
69
79
116
69
font

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

CanvasRenderingContext2D.fontKerning はキャンバス API のプロパティで、フォントのカーニング情報をどのように使用するかを指定します。
99
99
105
99
fontStretch

CanvasRenderingContext2D.fontStretch はキャンバス API のプロパティで、テキストを描画するときにフォントをどのように拡張・縮小できるかを指定します。
99
99
117
99
fontVariantCaps

CanvasRenderingContext2D.fontVariantCaps はキャンバス API のプロパティで、描画するテキストの大文字化を変更します。
99
99
117
99
getImageData

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

getLineDash() はキャンバス 2D API の CanvasRenderingContext2D インターフェイスのメソッドで、現在の破線パターンを取得します。
69
79
105
16.4
69
16.4
getTransform

CanvasRenderingContext2D.getTransform() はキャンバス 2D API のメソッドで、このコンテキストに適用されている現在の変換行列を取得します。
80
80
105
16.4
80
16.4
globalAlpha

CanvasRenderingContext2D.globalAlpha はキャンバス 2D API のプロパティで、図形や画像をキャンバスに描画する際に適用されるアルファ値（透明度）を設定します。
69
79
105
16.4
69
16.4
globalCompositeOperation

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

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

imageSmoothingQuality は CanvasRenderingContext2D インターフェイスのプロパティで、キャンバス API の一部です。画像の平滑化の品質を設定します。
69
79
16.4
69
16.4
isPointInPath

CanvasRenderingContext2D.isPointInPath() はキャンバス 2D API のメソッドで、指定された点が現在のパスに含まれているかどうかを報告します。
69
79
105
16.4
69
16.4
isPointInStroke

CanvasRenderingContext2D.isPointInStroke() はキャンバス 2D API のメソッドで、指定された点がパスのストロークで囲まれた領域内にあるかどうかを報告します。
69
79
105
16.4
69
16.4
letterSpacing

CanvasRenderingContext2D.letterSpacing はキャンバス API のプロパティで、テキストを描画する際の字間を指定します。
99
99
115
18.4
99
18.4
lineCap

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

CanvasRenderingContext2D.lineDashOffset はキャンバス 2D API のプロパティで、破線のオフセット、または「位相」を設定します。
69
79
105
16.4
69
16.4
lineJoin

CanvasRenderingContext2D.lineJoin はキャンバス 2D API のプロパティで、 2 つの線分が接する部分で使用する形状を決定します。
69
79
105
16.4
69
16.4
lineTo

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

CanvasRenderingContext2D.lineWidth はキャンバス 2D API のプロパティで、線の太さを設定します。
69
79
105
16.4
69
16.4
measureText

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

CanvasRenderingContext2D.lineWidth はキャンバス 2D API のプロパティで、マイター制限の比率を設定します。
69
79
105
16.4
69
16.4
moveTo

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

Canvas 2D API の CanvasRenderingContext2D.putImageData() メソッドは、指定の ImageData オブジェクトのデータをキャンバスに描画します。更新対象の矩形が指定された場合は、その矩形内のピクセルのみが描画されます。このメソッドは、キャンバスの変換行列の影響を受けません。
69
79
105
16.4
69
16.4
quadraticCurveTo

CanvasRenderingContext2D.quadraticCurveTo() はキャンバス 2D API のメソッドで、現在のサブパスに二次ベジェ曲線を追加します。2 つの点が要求され、1 つ目の点は制御点、2 つ目の点は終点です。始点は現在のパスにおける最後の点であり、二次ベジェ曲線を作成する前に CanvasRenderingContext2D.moveTo を使用して変更できます。
69
79
105
16.4
69
16.4
rect

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

CanvasRenderingContext2D.resetTransform() はキャンバス 2D API のメソッドで、現在の座標変換を恒等行列にリセットします。
69
79
105
16.4
69
16.4
restore

CanvasRenderingContext2D.restore() はキャンバス 2D API のメソッドで、描画状態スタックの最上位の項目をポップすることで、直近に保存されたキャンバス状態を復元します。保存された状態がない場合、このメソッドは何も行いません。
69
79
105
16.4
69
16.4
rotate

CanvasRenderingContext2D.rotate() はキャンバス 2D API のメソッドで、座標変換行列に回転を追加します。
69
79
105
16.4
69
16.4
save

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

CanvasRenderingContext2D.scale() はキャンバス 2D API のメソッドで、キャンバス上の単位を縦方向および横方向に拡縮する座標変換を適用させます。
69
79
105
16.4
69
16.4
setLineDash

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

CanvasRenderingContext2D.setTransform() はキャンバス 2D API のメソッドで、現在の座標変換を恒等行列にリセット（上書き）した後、このメソッドの引数で記述された座標変換を呼び出します。これにより、コンテキストの変倍、回転、移動、歪めを行うことができます。
69
79
105
16.4
69
16.4
shadowBlur

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

Canvas 2D API の CanvasRenderingContext2D.shadowColor プロパティは、影の色を設定します。
69
79
105
16.4
69
16.4
shadowOffsetX

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

Canvas 2D API の CanvasRenderingContext2D.shadowOffsetY は、影を縦方向にずらす距離を設定します。
69
79
105
16.4
69
16.4
stroke

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

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

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

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

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

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

CanvasRenderingContext2D.textRendering はキャンバス API のプロパティで、テキストを描画するときに何を最適化するかについての情報をレンダリングエンジンに提供します。
99
99
116
99
transform

CanvasRenderingContext2D.transform() はキャンバス 2D API のメソッドで、このAPIは、現在の座標変換をこのメソッドの引数で指定された行列で乗算します。これにより、コンテキストの変倍、回転、移動、歪めの座標変換を行うことができます。
69
79
105
16.4
69
16.4
translate

CanvasRenderingContext2D.translate() はキャンバス 2D API のメソッドで、現在の座標変換行列に移動の座標変換を追加します。
69
79
105
16.4
69
16.4
wordSpacing

CanvasRenderingContext2D.wordSpacing はキャンバス API のプロパティで、テキストを描画する際の単語間の空間を指定します。
99
99
115
18.4
99
18.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: toBlob (105)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18.4)
実装メモ
  • font-weight`は設定できるが、反映されない（バグ284115参照）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18.4)
実装メモ
  • font-weight`は設定できるが、反映されない（バグ284115参照）。

基本構文

JAVASCRIPT 
const offscreen = new OffscreenCanvas(256, 256);
const ctx = offscreen.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 256, 256);
const bitmap = offscreen.transferToImageBitmap();

ライブデモ

Offscreen drawing

Draw to an OffscreenCanvas and copy the result into a visible canvas.

プレビュー全画面表示

Generated badge

Use an offscreen surface to generate a reusable badge before presenting it.

プレビュー全画面表示

Repeated frame source

Redraw a visible chart from an offscreen scene on a timer.

プレビュー全画面表示

実務での使いどころ

  • Offscreen canvas の活用

    メモ: この機能はウェブワーカー内で利用可能です。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク