title: Get input values and insert into function with two parameters to make rectangle?
body: <p>I am new beginner in javascript and I am not sure how to take the gathered input values (width and height), which then need to create a method called updateForm which takes a width and height parameter. The body of the function can set the width and height fields on the input form, and call a method to draw that rectangle on the canvas. </p>
  
  <p>JS fiddle - <a href="https://jsfiddle.net/rtomino/hbgmd4sg/2/" rel="nofollow noreferrer">https://jsfiddle.net/rtomino/hbgmd4sg/2/</a></p>
  
  <pre><code>&lt;form id="areaform"&gt;
     &lt;label for="wid"&gt;Width:&lt;/label&gt;
     &lt;input id="wid" type="number"&gt;
     &lt;label for="hgt"&gt;Height:&lt;/label&gt;
     &lt;input id="hgt" type="number"&gt;
  
    &lt;button onclick="draw()" type="button"&gt;Draw Rectangle&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;br&gt;
  
  &lt;div id="drawRectangle"&gt;
  &lt;canvas id="rectCanvas" width=500 height=500&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS </p>
  
  <pre><code>var canvas, 
      context, 
      widthValue = document.getElementById('wid'),
      heightValue = document.getElementById('hgt');
  
  canvas = document.getElementById("rectCanvas");
  context = canvas.getContext("2d");
  
  function updateForm(width, height) {
     'use strict';
  
   }
  
  
  function draw() {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.rect(0, 0, width, height);
     context.fillStyle = "#EA7B00";
     context.fill();
  }
  </code></pre>