paint() | Frontend Practical Guide

Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.types.image.paint`	65	79			65
DOM API
`paintWorklet_static` 実験的 paintWorklet は CSS インターフェイスの静的な読み取り専用プロパティで、ペイントワークレットへのアクセスを提供します。これは、CSS のプロパティが画像ファイルを期待する場所においてプログラムで画像を生成します。	65	79			65
`PaintRenderingContext2D` The PaintRenderingContext2D interface of the CSS Painting API is the API's rendering context for drawing to the bitmap. It implements a subset of the CanvasRenderingContext2D API, with the following exceptions:	65	79			65
`beginPath` CanvasRenderingContext2D.beginPath() はキャンバス 2D API のメソッドで、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合は、このメソッドを呼び出してください。	65	79			65
`clearRect` CanvasRenderingContext2D.clearRect() はキャンバス 2D API のメソッドで、矩形領域のピクセルを、透明な黒に設定することで消去します。	65	79			65
`clip` CanvasRenderingContext2D.clip() はキャンバス 2D API のメソッドで、現在のパスまたは指定されたパスを現在のクリッピング領域に変更します。前回のクリッピング領域があれば、現在のパスまたは指定されたパスと交差して新しいクリッピング領域を作成します。	65	79			65
`createLinearGradient` CanvasRenderingContext2D.createLinearGradient() は Canvas 2D API のメソッドで、指定された2つの座標を結ぶ直線に沿ってグラデーションを作成します。	65	79			65
`createPattern` CanvasRenderingContext2D.createPattern() はキャンバス 2D API のメソッドで、指定された画像と繰り返しを使ってパターンを作成します。このメソッドは CanvasPattern を返します。	65	79			65
`createRadialGradient` CanvasRenderingContext2D.createRadialGradient() はキャンバス 2D API のメソッドで、2 つの円のサイズと座標を使って放射グラデーションを作成します。	65	79			65
`drawImage` Canvas 2D API の CanvasRenderingContext2D.drawImage() メソッドは、キャンバスに画像を描画するいくつかの方法を提供します。	65	79			65
`fill` CanvasRenderingContext2D.fill() はキャンバス 2D API のメソッドで、現在のパスまたは指定されたパスを現在の CanvasRenderingContext2D.fillStyle で塗りつぶします。	65	79			65
`fillRect` CanvasRenderingContext2D.fillRect() はキャンバス 2D API のメソッドで、塗りつぶした矩形を現在の CanvasRenderingContext2D.fillStyle に基づいて描きます。	65	79			65
`fillStyle` CanvasRenderingContext2D.fillStyle はキャンバス 2D API のプロパティで、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。既定値は #000 (黒色)です。	65	79			65
`filter` 非標準 CanvasRenderingContext2D.filter はキャンバス 2D API のプロパティで、ぼかしやグレースケール化などのフィルター効果を提供します。これは CSS の filter プロパティに似ており、同じ値を受け付けます。	65	79			65
`getLineDash` getLineDash() はキャンバス 2D API の CanvasRenderingContext2D インターフェイスのメソッドで、現在の破線パターンを取得します。	65	79			65
`getTransform` CanvasRenderingContext2D.getTransform() はキャンバス 2D API のメソッドで、このコンテキストに適用されている現在の変換行列を取得します。	68	79			68
`globalAlpha` CanvasRenderingContext2D.globalAlpha はキャンバス 2D API のプロパティで、図形や画像をキャンバスに描画する際に適用されるアルファ値（透明度）を設定します。	65	79			65
`globalCompositeOperation` CanvasRenderingContext2D.globalCompositeOperation はキャンバス 2D API のプロパティで、新たな図形を描くときに適用する合成演算の種類を定めます。	65	79			65
`imageSmoothingEnabled` imageSmoothingEnabled は CanvasRenderingContext2D インターフェイスのプロパティで、キャンバス API の一部です。変倍された画像を平滑化するか (true、既定値) またはしないか (false) を決定します。 imageSmoothingEnabled プロパティを取得すると、最後に設定された値が返されます。	65	79			65
`imageSmoothingQuality` imageSmoothingQuality は CanvasRenderingContext2D インターフェイスのプロパティで、キャンバス API の一部です。画像の平滑化の品質を設定します。	134	134			134
`isPointInPath` CanvasRenderingContext2D.isPointInPath() はキャンバス 2D API のメソッドで、指定された点が現在のパスに含まれているかどうかを報告します。	65	79			65
`isPointInStroke` CanvasRenderingContext2D.isPointInStroke() はキャンバス 2D API のメソッドで、指定された点がパスのストロークで囲まれた領域内にあるかどうかを報告します。	65	79			65
`lineCap` CanvasRenderingContext2D.lineCap はキャンバス 2D API のプロパティで、描く線の端点の形状を設定します。	65	79			65
`lineDashOffset` CanvasRenderingContext2D.lineDashOffset はキャンバス 2D API のプロパティで、破線のオフセット、または「位相」を設定します。	65	79			65
`lineJoin` CanvasRenderingContext2D.lineJoin はキャンバス 2D API のプロパティで、 2 つの線分が接する部分で使用する形状を決定します。	65	79			65
`lineWidth` CanvasRenderingContext2D.lineWidth はキャンバス 2D API のプロパティで、線の太さを設定します。	65	79			65
`miterLimit` CanvasRenderingContext2D.lineWidth はキャンバス 2D API のプロパティで、マイター制限の比率を設定します。	65	79			65
`resetTransform` CanvasRenderingContext2D.resetTransform() はキャンバス 2D API のメソッドで、現在の座標変換を恒等行列にリセットします。	65	79			65
`restore` CanvasRenderingContext2D.restore() はキャンバス 2D API のメソッドで、描画状態スタックの最上位の項目をポップすることで、直近に保存されたキャンバス状態を復元します。保存された状態がない場合、このメソッドは何も行いません。	65	79			65
`rotate` CanvasRenderingContext2D.rotate() はキャンバス 2D API のメソッドで、座標変換行列に回転を追加します。	65	79			65
`save` CanvasRenderingContext2D.save() はキャンバス 2D API のメソッドで、現在の状態をスタックにプッシュすることで、キャンバス全体の状態を保存します。	65	79			65
`scale` CanvasRenderingContext2D.scale() はキャンバス 2D API のメソッドで、キャンバス上の単位を縦方向および横方向に拡縮する座標変換を適用させます。	65	79			65
`setLineDash` setLineDash() はキャンバス 2D API の CanvasRenderingContext2D インターフェイスのメソッドで、線を描画するときに使用される破線のパターンを設定します。これは描画する線とその隙間の長さの値を交互に指定する配列を使用します。	65	79			65
`setTransform` CanvasRenderingContext2D.setTransform() はキャンバス 2D API のメソッドで、現在の座標変換を恒等行列にリセット（上書き）した後、このメソッドの引数で記述された座標変換を呼び出します。これにより、コンテキストの変倍、回転、移動、歪めを行うことができます。	68	79			68
`shadowBlur` Canvas 2D API の CanvasRenderingContext2D.shadowBlur プロパティは、影にかかるぼかしの量を設定します。デフォルトは 0 (ぼかしなし) です。	65	79			65
`shadowColor` Canvas 2D API の CanvasRenderingContext2D.shadowColor プロパティは、影の色を設定します。	65	79			65
`shadowOffsetX` Canvas 2D API の CanvasRenderingContext2D.shadowOffsetX プロパティは、影を横方向にずらす距離を設定します。	65	79			65
`shadowOffsetY` Canvas 2D API の CanvasRenderingContext2D.shadowOffsetY は、影を縦方向にずらす距離を設定します。	65	79			65
`stroke` CanvasRenderingContext2D.stroke() はキャンバス 2D API のメソッドで、現在のあるいは渡されたパスを、現在の線のスタイルで描画します。	65	79			65
`strokeRect` CanvasRenderingContext2D.strokeRect() はキャンバス 2D API のメソッドで、矩形の輪郭を現在の CanvasRenderingContext2D.strokeStyle とその他のコンテキスト設定によって描画します。	65	79			65
`strokeStyle` CanvasRenderingContext2D.strokeStyle はキャンバス 2D API のプロパティで、図形の辺（輪郭）に使用する色、グラデーション、またはパターンを指定します。既定値は #000 （黒色）です。	65	79			65
`transform` CanvasRenderingContext2D.transform() はキャンバス 2D API のメソッドで、このAPIは、現在の座標変換をこのメソッドの引数で指定された行列で乗算します。これにより、コンテキストの変倍、回転、移動、歪めの座標変換を行うことができます。	65	79			65
`translate` CanvasRenderingContext2D.translate() はキャンバス 2D API のメソッドで、現在の座標変換行列に移動の座標変換を追加します。	65	79			65
`PaintSize` CSS Painting API の PaintSize インターフェイスは、作成者が描画する出力ビットマップのサイズを表します。	65	79			65
`height` PaintSize インターフェイスの高さ読み取り専用プロパティは、作成者が描画する出力ビットマップの高さを返します。	65	79			65
`width` PaintSize インターフェイスの width 読み取り専用プロパティは、作成者が描画する出力ビットマップの幅を返します。	65	79			65
`PaintWorkletGlobalScope` 実験的 PaintWorkletGlobalScope は CSS 描画 API のインターフェイスで、描画Worklet内で利用できるグローバルオブジェクトを表します。	65	79			65
`devicePixelRatio` 実験的 devicePixelRatio は PaintWorkletGlobalScope インターフェイスの読み取り専用プロパティで、現在の端末の論理ピクセルに対する物理ピクセルの比率を返します。	65	79			65
`registerPaint` 実験的 registerPaint() は PaintWorkletGlobalScope インターフェイスのメソッドで、CSS プロパティがファイルを指定している場合に、プログラムで画像を生成するクラスを登録します。	65	79			65
CSS タイプ
`paint.additional parameters` `paintWorklet` に渡す追加パラメータをサポートします

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

.element {
  background-image: paint(my-pattern);
  --pattern-color: #3498db;
  --pattern-size: 20;
}

ライブデモ

custompattern

CSS custompattern demo.

プレビュー全画面表示

Color change

CSS Colorchange demo.

プレビュー全画面表示

Resize

CSS Sizechange demo.

プレビュー全画面表示

実務での使いどころ

プログラム的な背景パターン生成

幾何学模様やグラデーションパターンなど、画像ファイルなしで動的な背景を描画し、パフォーマンスとカスタマイズ性を両立します。

注意点

SafariとFirefoxでは未サポートのため、フォールバックとして通常の背景画像やグラデーションを用意してください。

対応ブラウザ

基本構文

ライブデモ

custompattern

Color change

Resize

実務での使いどころ

プログラム的な背景パターン生成

注意点

アクセシビリティ

参考リンク