<canvas id="canvas"></canvas>

function randomScalingFactor() {
  return 50 + Math.round(Math.random() * 50);
}

function coverImage(tSizeX, tSizeY, iSizeX, iSizeY, pivotX = 0.5, pivotY = 0.5) {
  const ratio = Math.max(tSizeX / iSizeX, tSizeY / iSizeY);
  const dw = iSizeX * ratio;
  const dh = iSizeY * ratio;
  const dx = (tSizeX - dw) * pivotX;
  const dy = (tSizeY - dh) * pivotY;

  return [0, 0, iSizeX, iSizeY, dx, dy, dw, dh];
}

Chart.pluginService.register({
  beforeDraw: function (chart, easing) {
    if (
      chart.config.options.chartArea &&
      chart.config.options.chartArea.backgroundColor
    ) {
      const ctx = chart.chart.ctx;
      const chartArea = chart.chartArea;

      ctx.save();
      ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
      ctx.fillRect(
        chartArea.left,
        chartArea.top,
        chartArea.right - chartArea.left,
        chartArea.bottom - chartArea.top
      );
      ctx.restore();
    }
  }
});

const img = new Image();
img.src = "https://i.ibb.co/Z8CpjDk/Asset-1.png";
img.onload = function () {
  const ctx = document.getElementById("canvas").getContext("2d");

  const patternCanvas = document.createElement("canvas");
  const patternContext = patternCanvas.getContext("2d");

  const chart = new Chart(ctx, {
    type: "radar",
    plugins: [
      {
        afterLayout: function (chart, options) {
          const chH = chart.chartArea.bottom - chart.chartArea.top;
          const w = chart.width;
          const h = chart.height;
          patternCanvas.width = w;
          patternCanvas.height = h;
          patternContext.clearRect(0, 0, w, h);
          
          const pivotY = 1 - (chart.height - chH / 2) / chart.height;
          patternContext.drawImage(
            img, ...coverImage(w, h, img.width, img.height, 0.5, pivotY)
          );

          chart.data.datasets[0].borderColor = ctx.createPattern(patternCanvas, 'no-repeat');
        }
      }
    ],
    data: {
      labels: [
        "#3CBAFC",
        "#2EFECD",
        "#FCB057",
        "#F26E51",
        "#FF7697",
        "#EA4D4D"
      ],
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: "rgba(255,255,255,0.15)",
          borderColor: null,
          borderWidth: 5,
          pointBackgroundColor: [
            "#3CBAFC",
            "#2EFECD",
            "#FCB057",
            "#F26E51",
            "#FF7697",
            "#EA4D4D"
          ],
          lineTension: 0.5,
          data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
          ]
        }
      ]
    },
    options: {
      legend: {
        position: "top"
      },
      title: {
        display: true,
        text: "Chart.js Radar Chart"
      },
      scale: {
        ticks: {
          beginAtZero: true,
          display: false
        },
        angleLines: {
          color: "rgba(255,255,255,0.05)"
        },
        gridLines: {
          circular: true,
          color: "rgba(255,255,255,0.05)",
          borderDash: [4, 4]
        }
      },
      chartArea: {
        backgroundColor: "#373c45"
      }
    }
  });
  // console.log(chart)
  chart.update();
};