How to save canvas state on page resize?

Question

JavaScript

Good afternoon, the following task arose - a background image is placed in the canvas element, another image is added on top of it, and the user erases the top image by moving the mouse. This is all implemented, but the width of the canvas is set from js, and when the window is resized, the canvas also changes and the top image disappears, how can I save it? At the same time, to save, as it were, the state, that is, what the user has already erased?

(function() {
      var canvas = document.getElementById('holst');
      var canvContext = canvas.getContext('2d');
      canvContext.fillRect(0, 0, 100, 100);
      window.addEventListener('resize', function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });
    })();

Answer 1

Canvas stores its state with no effort on the part of the programmer. Look for where the programmer's effort was to NOT save the state of the canvas.

Answer 2

You can resize the canvas with css, then its "real" dimensions will not change, but it will scale. But then for further "drawing" it will be necessary to recalculate the coordinates..
And what is the "erasing" script? Ato I once did this)) trushka.narod.ru/clear_me