のサイズを動的に変える時の注意事項

javascript canvas

真っ白になります


ちょっとでも、canvasのサイズを変えると真っ白になってしまうので、
画像を再読み込みしましょう。


windowのリサイズイベントでcanvasのサイズを変える例

<html>
  <head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>canvas</title>
    <script type='text/javascript' language='javascript' charset='utf-8'>
      // イベントハンドラを追加
      // 引用元 IT戦記:http://d.hatena.ne.jp/amachang/20080517
      function attach(elm, eventType, handler) {
          if (elm.addEventListener) {
              elm.addEventListener(eventType, handler, false);
          }
          else {
              elm.attachEvent('on' + eventType, handler);
          }
      }

      // canvasに画像読み込む 
      function drawImage()
      {
        var img = new Image();
        var canvas = document.getElementsByTagName('canvas')[0];

        img.src = '画像のURL';

        // 画像がDOMに読み込まれたら、canvasに読み込む
        attach(img, 'load', function()
        {
          canvas.getContext('2d').drawImage(img, 0, 0);
        });
      }

      attach(window, 'load', drawImage);
      attach(window, 'resize', function()
      {
        // canvasのサイズ変更
        document.getElementsByTagName('canvas')[0].height='400';

        // 画像を読み込み直さないと、真っ白になる
        drawImage()
      });
    </script>
  </head>
  <body>
    <canvas></canvas>
  </body>
</html>