title: Native Fullscreen JavaScript API toggle button
body: <p>I can't figure out how to modify the below code to include a toggle button. When in 'normal' mode the button would make the element go fullscreen and then change its function to go back to 'normal' state.</p>
  
  <p>I've modified the code from <a href="http://johndyer.name/lab/fullscreenapi/" rel="nofollow">John Dyer's Native Fullscreen JavaScript API</a> example:</p>
  
  <pre><code>var fsButton = document.getElementById('fsbutton'),
      fsElement = document.getElementById('specialstuff'),
      fsStatus = document.getElementById('fsstatus');
  
  
  if (window.fullScreenApi.supportsFullScreen) {
      fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
      fsStatus.className = 'fullScreenSupported';
  
      // handle button click
      fsButton.addEventListener('click', function() {
          window.fullScreenApi.requestFullScreen(fsElement);
      }, true);
  
      fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
          if (fullScreenApi.isFullScreen()) {
              fsStatus.innerHTML = 'Whoa, you went fullscreen';
          } else {
              fsStatus.innerHTML = 'Back to normal';
          }
      }, true);
  
  } else {
      fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
  }
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>var container = document.getElementById('canvas'),
  fsButton = document.getElementById('fsbutton');
  
  if (window.fullScreenApi.supportsFullScreen) { // fullscreen supported
      fsButton.style.display = 'block';
  
      container.addEventListener(fullScreenApi.fullScreenEventName, function() {
          fsButton.addEventListener('click', function() {
              if (fullScreenApi.isFullScreen()) { // fullscreen is on
                  window.fullScreenApi.CancelFullScreen( container );
                  fsButton.className = 'fs-off';
              } else { // fullscreen is off
                  window.fullScreenApi.requestFullScreen( container );
                  container.style.width = "100%";
                  container.style.height = "100%";
                  fsButton.className = 'fs-on';
              }
          }, true)
  
      }, true);
  
  } else {
      // no fullscreen support - do nothing
  }
  </code></pre>
  
  <p>But it doesn't work. Any suggestions much appreciated!</p>