CSS Paint API

CSS Paint API（CSS Painting API）とはWEBブラウザがCSSで行っている描画処理の一部をJavaScriptで記述することができるものです。
詳細がよくわからないですが、canvas要素で頑張っていたことをもう少しスマートにかけるようになる？

とりあえず試す

Workerの一種のPaintWorkletが必要となる。

worklet.js


class CirclePainter {
	static get inputProperties() {
		return ['--circle-color'];
	}
 
	paint(context, size, properties) {
		const color = properties.get('--circle-color').toString();
		context.fillStyle = color;
 
		const centerX = size.width / 2;
		const centerY = size.height / 2;
  
		context.arc(centerX, centerY, 50, 0, Math.PI * 2);
		context.fill();
	}
}
registerPaint('circle', CirclePainter);

registerPaint('circle', CirclePainter);
最後の箇所のregisterPaintで任意の名前('circle')で呼び出せるように登録しています。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>CSS Paint API</title>
	<style>
		.target {
			width: 500px;
			height: 500px;
			--circle-color: blue; /* JSへの受け渡し変数 */
			background-image: paint(circle); /* ここで呼び出し */
		}
	</style>
</head>
<body>
	<div class="target"></div>
	<script>
		// workletを登録する
		CSS.paintWorklet.addModule('worklet.js');
 	</script>
</body>
</html>

CSSから利用できるように、CSS.paintWorklet.addModuleでwokletを登録しています。

background-image: paint(circle);
そうすることにより、CSS内のbackground-imageで利用できます。

まだ、利用シーン等イメージはついていませんが、描画周りも日々進化していますね。
今後なにかに利用出来るかもということでメモがわりとして残します。

##参考
https://developers.google.com/web/updates/2018/01/paintapi