paint()

概要

paint()関数は、CSS Painting API（Houdini）の一部で、JavaScriptで記述されたPaint Workletを使って要素の背景やボーダーにカスタム画像を描画します。Canvas APIに似たインターフェースでプログラム的に画像を生成でき、CSSカスタムプロパティと連携して動的な描画が可能です。従来のCSS表現では難しかった複雑なビジュアルエフェクトの実現に適しています。

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

• paint()で描画されたコンテンツは装飾目的に限定し、情報伝達に必要な要素はHTML/CSSで別途提供してください。

参考リンク

• MDN Web Docs — paint()
• Can I use — paint()