javascript - HTMLキャンバスでランダムなコントラストレベルを生成する方法はありますか?

Question

この形を行動実験の刺激として提示しようとしています。画像に 0 と 1 の間のランダムなコントラスト レベルを持たせたいと思っています。そのために Math.random() を使用しようとしていますが、これを Chrome で実行すると、画面に表示されるときに形状がちらつきます。ランダムに生成されたコントラスト レベルで安定した形状を提示する方法はありますか?

drawFunc: function gabor() {
            context = jsPsych.currentTrial().context;
            context.beginPath();
            const gradLength = 100;
            const my_gradient  = context.createLinearGradient(850, 0, 1050, 0);
            my_gradient.addColorStop(0,'rgb(0, 0, 0)');
            my_gradient.addColorStop(0.05,'rgb(255, 255, 255)');
            my_gradient.addColorStop(0.1,'rgb(0, 0, 0)');
            my_gradient.addColorStop(0.15,'rgb(255, 255, 255)');
            my_gradient.addColorStop(0.2,'rgb(0, 0, 0)');
            my_gradient.addColorStop(0.25,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.3,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.35,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.4,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.45,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.5,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.55,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.6,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.65,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.7,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.75,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.8,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.85,"rgb(255, 255, 255)");
            my_gradient.addColorStop(0.9,"rgb(0, 0, 0)");
            my_gradient.addColorStop(0.95,"rgb(255, 255, 255)");
            my_gradient.addColorStop(1,"rgb(0, 0, 0)");
            var result1 = Math.random();
            context.filter = 'contrast('+ result1 +')';
            context.fillStyle=my_gradient;
            context.fillRect(950,300,gradLength,gradLength);
            context.stroke();