I used canvas html tag. And I loaded two images into canvas. And I could saw two images in canvas tag. But when i try to get new image' src by using canvas.toDataURL(), i can't get and i take this error(Tainted canvases may not be exported).
<!DOCTYPE html>
<html>
<body>
<canvas id='canvas' style='border: 1px solid; width: 600px; height: 600px;'>
Sorry, your browser does not support the canvas tag.
</canvas>
<script>
/**
Canvas configurations
**/
var canvas = document.getElementById('canvas');
canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
var ctx = canvas.getContext('2d');
/**
Image source declerations
**/
const src1 = 'https://cdn.pixabay.com/photo/2016/08/20/05/38/avatar-1606916_960_720.png';
const src2 = 'https://www.w3schools.com/w3images/avatar2.png';
function drawImage(sourceurl, i) {
var img = new Image();
img.crossorigin = 'Anonymous';
img.src = sourceurl;
img.addEventListener("load", function () {
ctx.drawImage(img, 0, i * 170, 300, 160);
console.log('canvas Data URL:', canvas.toDataURL());
});
}
drawImage(src1, 0);
drawImage(src2, 1);
</script>
</body>
</html>