title: Canvas Drawing Over HTML and Preserving Aspect on Screen Resize
body: <p><strong>Background</strong></p>
  
  <p>This is a pretty hard problem that I have been struggling with for a few days now. I am trying to display lessons in a slide-show format. So a lesson is made up of different slides. Now overlayed on top of each slide is a canvas element which is fit to the size of the screen.</p>
  
  <pre><code>canvas.width  = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
  </code></pre>
  
  <p>This allows the teacher to draw notes and highlight parts of the lesson on the canvas.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>The content of the slide is made up of HTML it looks like this when the slide is loaded. </p>
  
  <p><a href="https://i.stack.imgur.com/Ca5SO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ca5SO.png" alt=""></a></p>
  
  <p>When I resize the page however...</p>
  
  <p><a href="https://i.stack.imgur.com/rPTqK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rPTqK.png" alt="enter image description here"></a></p>
  
  <p>So the problem here is that the canvas 'image' is resized according to the aspect ratio of the page with CSS.</p>
  
  <pre><code>#theCanvas {
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
  }
  </code></pre>
  
  <p>But the actual HTML stays the same size, but re-arranges its line-wrap points, bad.</p>
  
  <p><strong>What I have Tried</strong></p>
  
  <p>First, I am making all my HTML elements resize according to the width and height of the window using CSS:</p>
  
  <pre><code>h1 {
      font-family: 'Open Sans Condensed', sans-serif;
      color: #222222;
      font-weight: 200;
      font-size: 5.9vw;
  }
  
  h2 {
      font-family: 'Open Sans Condensed', sans-serif;
      color: #222222;
      font-weight: 200;
      font-size: 3.0vh;
  }
  
  h4 {
      font-family: 'Open Sans Condensed', sans-serif;
      color: #444444;
      font-weight: 200;
      font-size: 2vmin;
  }
  
  p {
      font-family: 'Open Sans Condensed';
      font-size: 2vmin;
      font-weight: 200;
  }
  </code></pre>
  
  <p>Next I am saving and resizing the canvas image using:</p>
  
  <pre><code>window.onresize = function(event) {
  
      var data = canvas.toDataURL();
  
      // resize the canvas
      canvas.width = document.body.clientWidth;
      canvas.height = document.body.clientHeight;
      //alert($(container).width());
  
      // scale and redraw the canvas content
      var img=new Image();
  
      img.width = document.body.clientWidth;
      img.height = document.body.clientHeight;
  
      img.onload=function(){
          context.drawImage(img,0,0,img.width,img.height);
      }
      img.src=data;
  
  };
  </code></pre>
  
  <p>The result in full screen (1920px width)</p>
  
  <p><a href="https://i.stack.imgur.com/Q6eK5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q6eK5.png" alt="enter image description here"></a></p>
  
  <p>When a click the resize window button (1200px)</p>
  
  <p><a href="https://i.stack.imgur.com/fUwz5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fUwz5.png" alt="enter image description here"></a></p>
  
  <p>That's pretty close.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>Now when I drag the corner of the window to resize this happens:</p>
  
  <p><a href="https://i.stack.imgur.com/2T3XA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2T3XA.png" alt="enter image description here"></a></p>
  
  <p><strong>Question</strong></p>
  
  <p>1 - Why is the window.onresize function not triggering when I manually resize the corner of the window?</p>
  
  <p><em>(bonus question) Am I going about this the right way, or is it going to be more trouble then its worth to overlay canvas on HTML elements for interactive lessons?</em></p>