canvas is unloaded when parent element attributes change

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 );
  'same canvas with append?',
  document.querySelector('#output>canvas') === canvas
); // true

document.getElementById('output').innerHTML = canvas.outerHTML;
  '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.

Leave a Comment

Your email address will not be published.

Scroll to Top