title: passing form input to javascript and then updating canvas
body: <p>So what I'm trying to do here is to pass information from a input form of number type to javascript and then re-draw the canvas with the updated variable data.</p>
  
  <p>Here's what I've got so far:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script language = "JavaScript"&gt;
  
  var canvas;
  var context;
  var _x = 0;
  
  function draw(newx) {
  context.rect(newx,100,100,100)
  context.strokeStyle = "red"
  context.stroke()
  }
  
  function sendVal(form) { 
  _x = form.xx.value;
  context.clearRect(0,0,canvas.width,canvas.height);
  draw(_x);
  }
  
  window.onload = function() {
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  context.rect(_x,100,100,100);
  context.strokeStyle = "blue";
  context.stroke();
  };
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;FORM NAME="SENDX" ACTION="" METHOD="GET"&gt;
  Enter X: &lt;INPUT TYPE="number" NAME="xx"&gt;
  &lt;INPUT TYPE="submit" VALUE="ENTER CO-ORDINATES" onClick="sendVal(this.form)"&gt;
  &lt;/FORM&gt;
  
  &lt;canvas id="myCanvas" width="500" height="500"&gt;&lt;/canvas&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see above, I've tried making the canvas's context variable public so that I can access its functions from another part of the javascript, but the canvas never updates itself. How do I fix this? Thanks. </p>