How to copy a canvas present on one webpage to another

Question

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.

Answer 1

The content of a canvas element is set dynamically by code in the page.

It is not present in the HTML markup for the page, which the posted code obtains and passed through domParser. You can't obtain canvas content using this approach.

You would need access to the live DOM of the page to obtain content of a canvas that wasn't tainted. If the canvas is tainted however, you won't be able to read its content anyway.