title: Square gets stuck when it reaches the bottom of the canvas
body: <p>I am trying to make a simple JavaScript based game, where the user would move the square around the canvas and dodge elements / squares coming towards it (however this is just a plan, I am far from that point at the moment).</p>
  
  <p>The problem I am experiencing is that whenever I would make my canvas width value bigger than height, it would make the square get stuck after reaching the bottom of the page. There is probably an error / mistake in my code, however I could not seem to spot anything.</p>
  
  <p>The code can be found <a href="https://codepen.io/iph03nix/pen/qvNJRG?editors=1010" rel="nofollow noreferrer">here</a> or below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    // This code was created in CodePen.io, so some parts of it might not make any sense,
      // nor are they gonna be useful outside the CodePen platform. Those parts are however only commented.
  
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      // character data
      var charPositionX = canvas.width / 2;
      // Just for the snippet height
      var charPositionY = 0;
      //var deltaCharPositionX = 10;
      //var deltaCharPositionY = 10;
  
      //Removed the init() function, since the elements are loaded.
  
      // start creating elements, first the game environment.
      function draw() {
        clear();
        createRectangleToCoverCanvas();
        createChar(charPositionX, charPositionY, 10);
      }
  
      function clear() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
  
      function createRectangleToCoverCanvas() {
        ctx.fillStyle = '#ddd';
        ctx.strokeStyle = '#ddd';
        ctx.beginPath();
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fill();
        ctx.stroke();
      }
      // now the character
      function createChar(x, y, radius) {
        ctx.fillStyle = 'white';
        ctx.strokeStyle = 'white';
        ctx.beginPath();
        ctx.rect(x, y, 32, 32);
        ctx.fill();
        ctx.stroke();
      }
  
      var raf, 
        direction = {
        x: 0,
        y: 0
      };
   
      // set the speed variable for the character
      var speed = 5;
      function triggerMoveChar(event) {
        switch (event.keyCode) {
          // left
          case 37:
            // update the direction object
            direction.x = -speed;
            // avoid the scrolling
            event.preventDefault();
            break;
  
          // up
          case 38:
            direction.y = -speed;
            event.preventDefault();
            break;
  
          // right
          case 39:
            direction.x = speed;
            event.preventDefault();
            break;
          
          //down
          case 40:
            direction.y = speed;
            event.preventDefault();
            break;
        }
        // if the animation haven't been initiated yet, and the direction is not 0, then do it now
        if (!raf &amp;&amp; (direction.x || direction.y)) moveChar();
      }
  
      function releaseMoveChar(event) {
        switch (event.keyCode) {
          // left
          case 37:
            //reset this direction
            direction.x = 0;
            break;
          
          // up
          case 38:
            direction.y = 0;
            break;
          
          // right
          case 39:
            direction.x = 0;
            break;
          
          //down
          case 40:
            direction.y = 0;
            break;
        }
        if (!direction.x &amp;&amp; !direction.y) {
          // if none of the directions is set, stop the animation
          cancelAnimationFrame(raf);
          raf = undefined;
        }
      }
  
      function moveChar() {
        // declare the animation function
        var move = function() {
          // update the positions without going out of the screen
          if(direction.x){
           if(
          (charPositionX &gt; 0 &amp;&amp; charPositionX &lt; canvas.width-32) ||
         (charPositionX &lt;= 0 &amp;&amp; direction.x &gt; 0) ||
         (charPositionX &gt;= canvas.width-32 &amp;&amp; direction.x &lt; 0))
        charPositionX += direction.x;
        }
        if(direction.y){
         if((charPositionY &gt; 0 &amp;&amp; charPositionY &lt; canvas.height-32) ||
         (charPositionY &lt;= 0 &amp;&amp; direction.y &gt; 0) ||
         (charPositionY &gt;= canvas.width-32 &amp;&amp; direction.y &lt; 0))
        charPositionY += direction.y;
        }
  
          // finally draw ou character
          draw();
          // update the raf id
          raf = requestAnimationFrame(move);
        };
      // let's go !
      raf = requestAnimationFrame(move);
      }
  
  
      draw();
  
      window.addEventListener('keydown', triggerMoveChar, true);
      window.addEventListener('keyup', releaseMoveChar, true);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    canvas {
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border: 3px solid red;
      }
  
      body {
        background: #222;
      }
  
      .container {
        color: #999;
        margin: 0;
        padding: 10px 0px 20px;
        font-family: "Orbitron", "Helvetica", sans-serif;
        text-align: center;
        font-size: 11px;
        line-height: 16px;
      }
  
      .container h1 {
        margin: 10px 0;
        color: red;
        font-size: 32px;
        min-height: 430px;
      }
  
      .container h2 {
        margin: 10px 0;
        color: #ccc;
        font-size: 24px;
        min-height: 10px;
      }
  
      .container h3 {
        margin: 10px 0;
        color: #999;
        font-size: 18px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="container"&gt;
          &lt;canvas id="canvas" width="640" height="416"&gt;&lt;/canvas&gt;
          &lt;h1&gt;Project : Simple Game [v0.1alpha]&lt;/h1&gt;
          &lt;h2&gt;CONTROLS: &lt;/h2&gt;
          &lt;h3&gt;Arrow Keys &lt;/h3&gt;
      &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>I will appreciate any help.</p>