色指定の rgb() 関数の３つの変数となりうるのは 255以下の固定した自然数だけですが、それを任意の実数の変数にする方法があります。たとえば次のようにします。

　　for ( let x=0; x<=400; x++ ) {
　　　　for ( let y=0; y<=400; y++ ) {
　　　　　　let q = Math.sqrt(x*x+y*y);
　　　　　　ctx.fillStyle = `rgb( ${Math.floor(255*q/400)} ${Math.floor(255*q/400)} 0)`;
　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　}

　　　　　※　" ` " は Ｐキー の右隣のキー と Shiftキー を同時に押すことで入力できます。

　この例を利用すると、原点からの距離が遠くなるにつれ黄色の彩度と明度が徐々に上がっていくグラデーションを描くことができます。
　　　　　※　RGB のうち 最大値を max、 最小値を min、 それら以外を mid とする。
　　　　　　　　彩度（%） ＝　( max − min ) / max　× 100
　　　　　　　　明度（%） ＝　max / 255　× 100

プログラムの内容 ：