title: html5 canvas resize with javascript (not achieving desired result)
body: <p>i was testing some code with javascript, about resizing the html5 canvas. i've asked similar question before, when i was testing the same thing with jquery. and i've got the desired solution that time, reference (eg_1). in this (eg_1), the result was, canvas element was resizing in every frame because of <code>requestAnimationFrame($.fn.animate);</code> is taking place in a recursive form.the visual result for that is <a href="https://i.stack.imgur.com/h5ck2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h5ck2.png" alt="enter image description here"></a> here the width attribute updates when i resize the console window. and if i close the console the canvas resizes automatically, i don't need to reload the window, to update the attribute values. means canvas is full screen, all time. but i am having problem with the same thing, in javascript. if i close the console, the width of the console cuts (or resizes) the canvas with a white space. here is the visual result <a href="https://i.stack.imgur.com/REM4x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/REM4x.png" alt="enter image description here"></a> the white space is my problem. i've to reload the window, to make the canvas full screen again. in short i'm not having the same effect as (eg_1). here i tried so far, reference (eg_2).</p>
  
  <p>(eg_1)</p>
  
  <p>html : <code>&lt;canvas&gt;&lt;/canvas&gt;</code></p>
  
  <p>css :</p>
  
  <pre><code>* {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  canvas {
    background-color: turquoise;
  }
  </code></pre>
  
  <p>jquery :</p>
  
  <pre><code>$(document).ready(function() {
    var view = $(window),
      canvas = $("canvas"),
      ctx = canvas[0].getContext("2d"),
      width = view.width(),
      height = view.height();
  
    $.fn.windowResize = function() {
      var width = view.width();
      height = view.height();
  
      canvas.attr("width", width);
      canvas.attr("height", height);
    };
  
    view.on("resize", $.fn.windowResize);
  
    canvas.attr("width", width);
    canvas.attr("height", height);
  
    $.fn.animate = function() {
      requestAnimationFrame($.fn.animate);
      ctx.clearRect(0, 0, width, height);
      // start here
    };
  
    $.fn.animate();
  });
  </code></pre>
  
  <p>(eg_2)</p>
  
  <pre><code>var canvas = document.querySelectorAll("canvas")[0];
  var context = canvas.getContext("2d");
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  
  function resize() {
    setInterval(resize, 5);
    clearInterval(resize);
    canvas.width = windowWidth;
    canvas.height = windowHeight;
  }
  
  resize();
  </code></pre>