title: Capture user input on HTML canvas/Javascript and vice versa
body: <p>I am trying to draw a rectangle in HTML5 canvas based on user input.  I am also trying to do the opposite.  If a user draws a rectangle in the canvas, the width and height values are dropped into the form.  Please see my jsfiddle.</p>
  
  <p><a href="http://jsfiddle.net/hbrennan72/FyTx5/" rel="nofollow">http://jsfiddle.net/hbrennan72/FyTx5/</a></p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var rect = {};
  //var drag = false;
  
      function getarea() 
       {      
              var wid = document.getElementById("wid").value;
              var hgt = document.getElementById("hgt").value;
              var area = wid * hgt;
              var perim = wid * 2 + hgt * 2;
  
               if (wid =="") {
                      document.getElementById("errors").innerHTML = "The value for the width is blank.";
                      document.getElementById('wid').focus();
               }
  
               else if (hgt == "") {
                      document.getElementById("errors").innerHTML = "The value for the height is blank.";
                      document.getElementById("hgt").focus();
               }
  
              else if (isNaN (wid)) {
                      document.getElementById("errors").innerHTML = "Please enter a numeric value for the width.";
                      document.getElementById('wid').focus();
              }
  
              else if (isNaN (hgt)) {
                      document.getElementById("errors").innerHTML = "Please enter a numeric value for the height.";
                      document.getElementById("hgt").focus();
              }
  
              else if (wid &lt;= 0) {
                      document.getElementById("errors").innerHTML = "The width is less than or equal to zero.";
                      document.getElementById('wid').focus();
              }
  
              else if (hgt &lt;= 0) {
                      document.getElementById("errors").innerHTML = "The height is less than or equal to zero.";
                      document.getElementById("hgt").focus();
              }
  
              else if (wid &gt; 500) {
                      document.getElementById("errors").innerHTML = "The width is greater than 500.";
                      document.getElementById('wid').focus();
              }
  
              else if (hgt &gt; 500) {
                      document.getElementById("errors").innerHTML = "The height is greater than 500.";
                      document.getElementById("hgt").focus();
              }
  
              else {
                  window.document.getElementById("area").innerHTML = area;
                  window.document.getElementById("perim").innerHTML = perim;
                  document.getElementById("errors").innerHTML = "Please see results listed above.";
             }
  
      }
  
  
  
      function updateform (){
          "use strict"
          var wid = document.getElementById("wid").value;
          var hgt = document.getElementById("hgt").value;
          var area = wid * hgt;
  
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2D");
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillRect(0,0, rect.wid, rect.hgt);
          context.fillStyle = "#FF0000"; //red color
          draw();
      }
  
      function mouseDown(e) 
      {
        rect.startX = e.pageX - this.offsetLeft;
        rect.startY = e.pageY - this.offsetTop;
        canvas.style.cursor="crosshair";
        drag = true;
      }
  
      function mouseUp () {
          drag = false;
      }
  
      function mouseMove(e) {
        if (drag) {
          rect.wid = (e.pageX - this.offsetLeft) - rect.startX;
          rect.hgt = (e.pageY - this.offsetTop) - rect.startY ;
          context.clearRect(0,0,canvas.width,canvas.height);
          draw();
        }
      }
  
      function init() {
          canvas.addEventListener("mousedown", mouseDown, false);
          canvas.addEventListener("mouseup", mouseUp, false);
          canvas.addEventListener("mousemove", mouseMove, false);
      }
  
      init();
  
      function drawform() {
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2D");
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillRect(0,0, rect.wid, rect.hgt);
          context.fillStyle = "#FF0000"; //red color
  
      }
  
      function draw (){
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillRect(rect.startX, rect.startY, rect.wid, rect.hgt);
          context.fillStyle = "#378E37"; //green color    
      }
  
      draw();
  </code></pre>