Как сохранить состояние canvas при ресайзе страницы?

Question

[stasov1]

Добрый день, возникла такая задача - в элемент canvas ставится фоновая картинка, поверх нее добавляется другая картинка и пользователь по движению мыши стирает верхнюю картинку. Это все реализовано, но ширина канваса задается из js, и при изменении размера окна, канваса тоже меняется и верхнее изображение пропадает, как можно сохранить его? При этом сохранить как бы состояние, то есть то что пользователь уже стер?

(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

[napa3um]

Canvas хранит своё состояние без усилий со стороны программиста. Ищите, где усилия программиста были направлены на то, чтобы НЕ сохранить состояние канвы.

Answer 2

[trushka]

Можно ресайзить canvas с помощью css, тогда его "реальные" размеры не изменятся, но он будет масштабироваться. Но тогда для дальнейшего "рисования" надо будет пересчитывать координаты..

А что за скрипт "стирания"? Ато я когда-то такой делал)) trushka.narod.ru/clear_me

Comments

[stasov1]

Да, примерно такой эффект, только стирать нужно облака) В идеале нужно добиться такого эффекта, как на этой странице hleb-dom.ru/design.html, второй экран.