title: How to redraw canvas on window resize
body: <p>I'm trying to redraw a canvas when the window gets resized.</p>
  
  <p>At the moment when the window resizes, the canvas doesn't redraw the blue rectangle and it doesn't show the erase effect.</p>
  
  <p>I'm new to canvas and I can't figure this out.</p>
  
  <p>How can I fix this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("canvasTop");
  // set the canvas element's width/height to cover #wrapper
  var wrapper=document.getElementById('wrapper');
  var wrapperStyle=window.getComputedStyle(wrapper,null);
  canvas.width=parseInt(wrapperStyle.getPropertyValue("width"));
  canvas.height=parseInt(wrapperStyle.getPropertyValue("height"));
  //
  var ctx = canvas.getContext("2d");
      ctx.lineWidth = 10;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.fillStyle = "skyblue";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      // set "erase" compositing once at start of app for better performance
      ctx.globalCompositeOperation = "destination-out";
  
  var canvasOffset = $("#canvasTop").offset();
  var offsetX = canvasOffset.left;
  var offsetY = canvasOffset.top;
  
  var startX;
  var startY;
  var isDown = false;
  
  function handleMouseDown(e) {
      e.preventDefault();
      startX = parseInt(e.clientX - offsetX);
      startY = parseInt(e.clientY - offsetY);
      isDown = true;
  }
  
  function handleMouseUp(e) {
      e.preventDefault();
      isDown = false;
  }
  
  function handleMouseOut(e) {
      e.preventDefault();
      isDown = false;
  }
  
  function handleMouseMove(e) {
      if (!isDown) {
          return;
      }
      mouseX = parseInt(e.clientX - offsetX);
      mouseY = parseInt(e.clientY - offsetY);
  
      // Put your mousemove stuff here
      ctx.beginPath();
      ctx.moveTo(startX, startY);
      ctx.lineTo(mouseX, mouseY);
      ctx.stroke();
      startX = mouseX;
      startY = mouseY;
  }
  
  $("#canvasTop").mousedown(function (e) {
      handleMouseDown(e);
  });
  $("#canvasTop").mousemove(function (e) {
      handleMouseMove(e);
  });
  $("#canvasTop").mouseup(function (e) {
      handleMouseUp(e);
  });
  $("#canvasTop").mouseout(function (e) {
      handleMouseOut(e);
  });
  
  window.addEventListener("resize", resizeCanvas, false);
   
  function resizeCanvas(e) {
    var myCanvas = document.getElementById("canvasTop");
    myCanvas.width = document.documentElement.clientWidth;
    myCanvas.height = document.documentElement.clientHeight;
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {height:100%}
  body { margin:0; padding:0; }
  #wrapper {
    position:relative; 
    margin:auto; 
    width:100%; 
    height:100%; 
    background-color:#ffffff;
  }
  #canvasTop {
    position:absolute; 
    top:0px; 
    left:0px; 
  }
  #text {
    position:absolute; 
    left:0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
    width:400px; 
    height:200px; 
    text-align:center; 
    top: 50%; 
    transform:translateY(-50%); 
  }
  #canvas{border:1px solid red; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h4&gt;Drag the mouse over center to "scratch-off" reveal&lt;/h4&gt;
  &lt;div id="wrapper"&gt;
    &lt;!-- move #text before #canvasTop --&gt;
    &lt;div id="text"&gt;
      &lt;p&gt; Text Text Text Text Text Text Text Text Text&lt;/p&gt;
      &lt;p&gt; Text Text Text Text Text Text&lt;/p&gt;
      &lt;p&gt; Text Text Text Text Text Text&lt;/p&gt;
      &lt;p&gt; Text Text Text Text Text Text Text Text Text&lt;/p&gt;
    &lt;/div&gt;
    &lt;canvas id="canvasTop" width=512 height=512&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>