Highcharts: Add a custom menu Copy to clipboard - svg

Question

I wish to add a custom button in highcharts export menu to copy to clipboard with chrome, but it doesn't work and I get the error "Failed to read or decode Blob for clipboard item type image/png".
In my code I am trying to convert an svg image of the chart to png and create a blob then run ClipboardItem on chrome.
https://jsfiddle.net/vmjwr0fo/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
exporting: {
buttons: {
contextButton: {
menuItems: [
{
text: 'Copy to clipboard',
onclick: async function()
{
const svg = this.getSVG();
const canvas = document.createElement('canvas');
canvas.width = 1200;
canvas.height = 900;
const ctx = canvas.getContext('2d');
const img = document.createElement('img');
img.onload = function()
{
ctx.drawImage(img, 0, 0);
};
img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))));
const data = new XMLSerializer().serializeToString(img);
const pngImageBlob = await new Blob([data], {type: "image/png"});
try
{
await navigator.clipboard.write([
new ClipboardItem({
'image/png': pngImageBlob
})
]);
}
catch (error)
{
console.error(error.message);
}
}
}
]
}
}
}
});
#container {
height: 400px;
margin: 0 auto;
margin-top: 1em;
min-width: 320px;
max-width: 800px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
Thank you in advance for your help