title: Generating Canvas width and height attributes to be the same size as a rectangle of user inputted size
body: <p>The code below, on start up, generates a rectangle the same size as the canvas which is correct. The problem is that when the user clicks the button a new canvas is generated but the rectangle does not appear. Please help.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt; &lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){ &lt;!-- function to change the &lt;canvas&gt; attributes of "width" and "height" to the same size as the rectangle --&gt;
     $("#btn").click(function(){
     $("#myCanvas").attr("height", $("#height").val());
     $("#myCanvas").attr("width", $("#width").val());
    });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &amp;nbsp;Rectangle Width:
    &lt;input type="number" id="width" value="400"&gt;
    &amp;nbsp;Rectangle Height:
    &lt;input type="number" id="height" value="400"&gt;
    &amp;nbsp;    
    &lt;br&gt;
  
    &lt;canvas id="myCanvas" width=400 height=400 style="border:0px solid #d3d3d3;"&gt; 
    Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
  
  &lt;script&gt;
  rect();
  function rect(){
    width = document.getElementById("width").value;
    height = document.getElementById("height").value;
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.strokeStyle = "#FF0000";
    ctx.strokeRect(0,0, width, height);
  }
  &lt;/script&gt;
  &lt;button id="btn" onclick = "rect()"&gt;Submit to draw a rectangle the same size as the canvas&lt;/button&gt;     
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>