How to copy a canvas present on one webpage to another

I am attempting to get a canvas from a webpage and display it elsewhere.
The canvas itself is not obtainable through an url, I get the webpage and grab the canvas from there.

That being said, when attempting to display that same canvas elsewhere, it’s blank.
I understand that canvases behave differently than other HTML Elements, however I was unable to figure out how to achieve what it is I am trying to do (if possible at all).

I am making a chrome extension and the concerned code is as follows.

service_worker:

chrome.runtime.onMessage.addListener(function(url, _sender, onSuccess) {
    fetch(url)
    .then(response => response.text())
    .then(responseText => onSuccess(responseText))

    return true;
});

script:

await chrome.runtime.sendMessage(url, response => {
    const responseParsed = domParser.parseFromString(response, 'text/html');

    const graphContainer = responseParsed.getElementsByClassName("chart-container")[0];
    if (graphContainer == undefined) throw Error("Failed to get the graph container");

    parentContainer.insertBefore(graphContainer, parentContainer.childNodes[1])
});

What works:

• I obtain the full webpage and am able to get the chart-container element.

What doesn’t:

• When inserting that same graph onto my other webpage, the graph is empty.