title: The keyboard's keypresses are not detected
body: <p>I'm wondering if my keyboard is broken, or I have problem with the code.
  The code below detects if the user is pressing the "u", "d", "j", and "m" keys.</p>
  
  <p>It seems impossible to recognize that all four keys are pressed at once. It can at most detect when 3 keys are pressed. I can't seem to find the problem.  I would greatly appreciate your help.</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 jkeypressed = false;
  var ukeypressed = false;
  var dkeypressed = false;
  var mkeypressed = false;
  
  
  function yeah() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.height = 500;
    canvas.width = 500;
  
  
    document.addEventListener("keydown", function(ev) {
      switch (ev.keyCode) {
        case 77:
          mkeypressed = true;
          break;
        case 74:
          jkeypressed = true;
          break;
        case 85:
          ukeypressed = true;
          break;
        case 68:
          dkeypressed = true;
          break;
      }
    }, false);
  
    document.addEventListener("keyup", function(ev) {
      switch (ev.keyCode) {
        case 77:
          mkeypressed = false;
          break;
        case 74:
          jkeypressed = false;
          break;
        case 85:
          ukeypressed = false;
          break;
        case 68:
          dkeypressed = false;
          break;
      }
    }, false);
  
    context.fillStyle = "#33CCFF";
    context.font = "20px Arial";
    context.fillText(dkeypressed + ' ' + jkeypressed + ' ' + ukeypressed + ' ' + mkeypressed, 300, 50);
  
  }
  var x = setInterval(yeah, 1);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>