題名の通り、値を変化させ続けることによってグラデーションの色を少しずつ変化させて、アニメーションの様にしたいのですがうまくできません。
やりたい事と教えて頂きたい事を分けていますが、合わせて教えて頂きたくお願い致します。

・やりたい事
1.描画の白い部分(描画が見えない部分)を上から下に少しずつ移動させたい。
2.白い部分が通過したら、通過した場所の色が元に戻るようしたい。
(下記ソースコード参照)

・教えて頂きたい事
1.addColorのオフセット値を少しずつ変化させる
2.同様にrgbの値を少しずつ変化させる
変化させたい値を変数とインクリメントを使用するというのが基本的な方法だと思うのですが、うまくできないのでご教示お願い致します。

下記は試みた事です。
addColorStopの場合
・offset値が0,1単位の為、インクリメントが使用出来ない
・対策としてfor文を使用して0.1単位で増加させようとしたが、描画に変化はない(白い部分が移動しない)
function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
for(let i = 0; i
grad.addColorStop(0.3, 'rgb(204,0,0');
grad.addColorStop(i 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(204,0,0');
}
～～～～～～～～～～～～～～～～～～

rgb値の場合
・同様に下記にて変数とインクリメントを使用するがエラーが出る
rgb値は変数は使用出来ない?下記エラー参照
エラー内容：Javascript.js:10 Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('rgb(x,0,0') could not be parsed as a color.
(addColorStop'の実行に失敗しました：提供された値（ 'rgb（x、0,0'）を色として解析できませんでした。)
x = 1;
function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
context.clearRect(0,0,WIDTH,HEIGHT);
grad.addColorStop(0.3, 'rgb(x,0,0');
grad.addColorStop(0.6, 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(x,0,0');

x = x++;

～～～～～～～～～～～～～～～～

ソースコード；

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>