chartjsとcanvasを使ってグラデーションのある鶏頭図を作成したい

canvasとchart.hsを使って以下の図のような中央が白くなっていてグラデーションで外側はそれぞれの色になるような鶏頭図を作成したいと思っています。どのような実装方法が考えられるでしょうか？

また、現在以下のようなコードを試しに実装してみたのですがうまくいきませんでした。

`<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const canvas = document.getElementById('chart')
        const ctx = canvas.getContext('2d');
        const gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100)
        const [ w , h ] = [ canvas.clientWidth , canvas.clientHeight ];
        gradient.addColorStop(0.0 , 'rgb(255,0,0)');
        gradient.addColorStop(0.5 , 'rgb(0,255,0)');
        
        const data = {
          backgroundColor: [gradient,gradient,gradient,gradient,gradient],
          labels: ['First label', 'Second label', 'Third label', 'Fourth label', 'Fifth label'],
          datasets: [
            {
              label: 'First dataset',
              backgroundColor: gradient,
              data: [50, 20, 40, 50, 22]
            }
          ]
        };
        
        const options = {
          tooltips: {
            mode: 'label'
          },

        };
        
        const myRadarChart = new Chart(ctx, {
          type: 'polarArea',
          data,
          options
        });
    });
    </script>
</head>
<body>
    <canvas id="chart" width="${width}" height="${width}" />
</body>
</html>