It’s not the attribute that causes the problem, but the canvas you create by doing
container.innerHTML = canvas.outerHTML
is not the same canvas anymore, but an entirely new canvas element, which doesn’t have any context initialized, and which will be fully transparent.
const canvas = document.createElement('canvas');
const output = document.getElementById('output');
output.append( canvas );
console.log(
'same canvas with append?',
document.querySelector('#output>canvas') === canvas
); // true
document.getElementById('output').innerHTML = canvas.outerHTML;
console.log(
'same canvas with innerHTML?',
document.querySelector('#output>canvas') === canvas
); // false<div id="output"></div>So if you want to keep the drawings of your canvas, you need to keep that same element in the DOM, and for this you need to append it.
CLICK HERE to find out more related problems solutions.