canvas利用した背景アニメーションの色の表示不具合（Chromeのみ）

Question

実現したいこと

particles.js（https://marcbruederlin.github.io/particles.js/）を使用して、
幾何学模様が浮遊するアニメーションを制作しています。
オプションにて色を設定できるのですが、ここ数ヶ月以内からChrome（Edgeも）でのみ、
色の表現が変わってしまいました。Safari、firefoxでは正常に（意図した通り）表示されています。
※公式も同様の現象

• 原因を特定したい
• 他のブラウザ（Safari、firefox）と同様に表示できるようにしたい

前提

particles.js（　https://marcbruederlin.github.io/particles.js/　）を使用しています。
Chromeでの見え方が突然変わってしまいました。

発生している問題・エラーメッセージ

エラーメッセージはありません

試したこと

jsのライブラリの401〜402に具体的にカラーコードを入れてみた
オプションの配列を単色にした
canvasを設置しているcontainerの背景を#000000にしてみたところ、指定した色のグラデーションで表示されているように見えた。背景が#000000以外の場合オブジェクトはほとんど黒に近い色で表示されているように見える

補足情報（FW/ツールのバージョンなど）

テストのcodepen
https://codepen.io/kaz333/pen/JjmQxgX

該当のソースコード

※ライブラリ部分は文字数の制限で記載できなかったので、上記codepenまたは下記公式よりご確認ください。
https://github.com/marcbruederlin/particles.js/blob/2cb1852c0a276cd694e0d03e810904dfd8bfac03/src/particles.js#L435

window.onload = function() {
        //perticle.js
        Particles.init({
          selector: '.header__background',
      color: ['#9F4367', '#9356A2', '#6B71AA', '#9FA6CF'], 
          maxParticles: 100,
          connectParticles: true,
          responsive: [
            {
              breakpoint: 1024,
              options: {
                maxParticles: 80
              }
            }, {
              breakpoint: 599,
              options: {
                maxParticles: 30
              }
            }
          ]
        });
 };  

<div class="perticle-wrap" style="background-color: #DFE0E1;">
   <canvas class="header__background"></canvas>
</div>

どなたか、Chromeだけ表示のされ方が違う原因にお心当たりのある方、
また対応方法ご存じの方いらっしゃいましたらご教示いただけますよう宜しくお願いいたします。

Comments

[int32_t]

Chrome のバグである可能性が極めて高いので、https://new.crbug.com/ よりバグレポートすべきでしょう。

[kaz33333]

ご確認ありがとうございます。
取り急ぎ、https://new.crbug.com/　よりバグレポートしてみました。

Answer 1

strokeStyleに加えて fillStyleも設定するととりあえず行けそうな気がします

    _.context.strokeStyle = gradient;
    _.context.fillStyle = gradient;

Comments

[kaz33333]

ありがとうございます。
fillStyleにgradientをあてたらグラデーションが再現できました。