Canvasで水滴のように円がランダムに徐々に増えて中心付近は塗りになる

Canvas（JavaScript）を学んでます。
次から次へと知らないことが出てきて、たまに萎えます。

今回は、前回の続きです。
前回はこちら↓です。

前回は、大きさの円がランダムに表示されるというものでした。
今回は、円の大きさがランダムで、さらに中心付近は塗りの円で、外側の円は塗りはなしで線のみです。

function render() {
		ctx.fillStyle = '#aaa';
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		setInterval(() => {
			let x = Math.floor(Math.random() * canvas.width);
			let y = Math.floor(Math.random() * canvas.height);
			let radius = Math.floor(Math.random() * 40);
			drawArc(x, y, radius);
		}, 100);
	}

	function drawArc(x, y, radius) {
		ctx.beginPath();
		ctx.arc(x, y, radius, 0, Math.PI * 2, false);

		let distance = Math.hypot(canvas.width / 2 - x, canvas.height / 2 - y);

		if (distance < 150) {
			ctx.fillStyle = 'blue';
			ctx.fill();
		} else {
			ctx.strokeStyle = 'blue';
			ctx.stroke();
		}
	}

今回は、Math.hypot()というものを使いました。

中心からの距離が◯◯以下なら塗り、◯◯以上なら塗りなしとしているのですが、その距離◯◯をMath.hypot()で計算しています。

Math.hypot()は、MDNには「引数の二乗和の平方根を返します。すなわち・・・」とあります。よくわからないのですが、おそらく三角関数（？）の斜めの線の長さが導けているんじゃないかと思ってます。

Math.hypot()

Canvasを勉強する中で、理解できたら、ここに説明を追加するようにいたします。

↓ブラウザで見たい方は下のリンクを御覧ください
　作ったものをただアップするだけのNetlifyの個人サイトです

canvas | notenonote

＊＊＊

蛇足ですが、Snapseedとインスタでいじってみました。