title: Detecting Keystroke Confusion
body: <p>I've been having confusion regarding how to move an image using javascript. Any input would be helpful and i'm pretty sure it has to do with the addEventListener lines. The code is supposed to display an image tht can be controlled with the w a s and d keys but it won't move. Please don't judge me for sloppy coding, I'm only 14 :P</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var facing = "S";
  var isMoving = false;
  
  var imgSource = "Images/charlieIdle.png";
  
  var w = window.innerWidth;
  var h = window.innerHeight;
  
  var charSpeed = 5;
  var charX = 50;
  var charY = 50;
  
  var ctx;
  function onKeyDown(event) {
    var keyPressed = String.fromCharCode(event.keyCode);
    console.log(keyPressed);
    if (keyPressed == "W") {
      isMoving = true;
      facing = "N";
    } else if (keyPressed == "A") {
      isMoving = true;
      facing = "W";
    } else if (keyPressed == "S") {
      isMoving  = true;
      facing = "S";
    } else if (keyPressed == "D") {
      isMoving = true;
      facing = "E;"
    }
  }
  function onKeyUp(event) {
    var keyPressed = String.fromCharCode(event.keyCode);
    if ((keyPressed == "W")||(keyPressed == "A")||(keyPressed == "S")||(keyPressed == "D")) {
      isMoving = false;
    }
  }
  function init() {
    var canv = document.getElementById("myCanv");
    ctx = canv.getContext("2d");
    canv.width = w;
    canv.height = h;
    window.addEventListener("keydown", onKeyDown, false);
    window.addEventListener("keyup", onKeyDown, false);
    return setInterval(draw,10);
  }
  function char() {
    var img = new Image();
    img.onload = function() {
    ctx.drawImage(img,charX,charY);
    };
    img.src = imgSource;
  }
  function clear() {
    ctx.clearRect(0,0,w,h);
  }
  function unloadScrollBars() {
      document.documentElement.style.overflow = 'hidden';
  }
  function moveChar() {
    if (isMoving) {
      if (facing == "N") {charY -= charSpeed;}
      else if (facing == "W") {charX -= charSpeed;}
      else if (facing == "S") {charY += charSpeed;}
      else if (facing == "E") {charX += charSPeed;}
    }
  }
  
  function draw() {
    clear();
    char();
    onKeyDown();
    onKeyUp();
    moveChar();
  }
  init();
  unloadScrollBars();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;canvas id="myCanv" width="500" height="500" style="border:1px solid #888888"&gt; &lt;/canvas&gt;
      &lt;script src= "library.js"&gt;&lt;/script&gt;
      &lt;script src= "game.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>