How to get a copy from a rendered element in canvas?

@ryan.murray 

To get a copy of a rendered element in a canvas, you can use the toDataURL() method to convert the canvas element into a data URL. Here's an example code snippet to achieve this:

1. First, create a canvas element and render your desired content on it:

1
2
3
4
5
6

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Render your content on the canvas
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

1. Use the toDataURL() method to get a data URL representing the content of the canvas:

1

const dataURL = canvas.toDataURL();

1. Optionally, you can then create an image element and set its src attribute to the data URL to display the copied content:

1
2
3

const img = new Image();
img.src = dataURL;
document.body.appendChild(img);

By following these steps, you can create a copy of the rendered element in a canvas and display it as an image on your webpage.