[Error] Issue downloading Vue-chart.js chart as a PNG

[Jarryd-pretorius]

Hey Devs thought I would post this issue here to see if you guys have any idea on how to fix the problem. any help would be greatly appreciated :)

I cannot get a my vue-chart.js canvas to download using toDataURL() I have tried multiple methods with no success and continue to run into a tainted canvas error wondering if anyone else has had this issue?

Below is the example of the code which gets the canvas from the "copyChart" ref which is assigned to the line graph and returns the canvas as a PNG.

const copyChart = ref(null);

function downloadChart() {
  const imageLink = document.createElement("a");
  const canvas = copyChart.value.chart.canvas;
  imageLink.href = canvas.toDataURL("image/png", 1);
}

and here is the code that generates the line graph

 <div>
    <Line
      ref="copyChart"
      id="my-chart-id"
      :options="options"
      :data="mainData"
    />
</div>

Regarding the framework I am currently using Nuxt3