title: JavaScript canvas moving rectangle back and forth
body: <p>I'm making a 2D platformer game in JavaScript right now and so far everything is working except when it comes to moving my first platform</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  
    &lt;style&gt;
      canvas {
        background: #eee;
      }
    &lt;/style&gt;
  
    &lt;canvas id="ctx" tabindex=0 width=900 height=500 style="border:1px solid #000000;" onkeypress="movePlayer(event)" onkeyup="keyUp(event)"&gt;&lt;/canvas&gt;
  
    &lt;script&gt;
      var canvas = document.getElementById("ctx");
      var ctx = canvas.getContext("2d");
      canvas.setAttribute('tabindex', 0);
      canvas.focus();
      canvas.addEventListener("keydown", movePlayer);
  
      //Maybe I can get a class working?
  
      class Platform {
        constructor(x, y, xS, yS, moveBool) {
          this.xPos = x;
          this.yPos = y;
          this.xSize = xS;
          this.ySize = yS;
  
          ctx.fillStyle = "red";
          ctx.fillRect(this.xPos, this.yPos, this.xSize, this.ySize);
  
          this.moveable = moveBool;
        }
  
        get getX() {
          return this.xPos;
        }
        get getY() {
          return this.yPos;
        }
        get getxSize() {
          return this.xSize;
        }
        get getySize() {
          return this.ySize;
        }
        get getMoveable() {
          return this.moveable;
        }
  
        set moveRight(speed) {
          this.xPos = speed;
        }
      }
  
      //Platform array:
      platformArray = [];
  
      //Vars:
  
      var x_new = 50;
      var y_new = 50;
  
      var isJumping = false;
      var isColliding = false;
  
      var speed = 10;
  
      //Moving platform vars:
      var plat1X = 100;
  
      var keys = {
        up: false,
        right: false,
        left: false
      };
  
      function movePlayer(event) {
        switch (event.keyCode) {
          //Right key down:
          case 39:
            keys["right"] = true;
            break;
            //Left key down:
          case 37:
            keys["left"] = true;
            break;
            //Up key down:
          case 38:
            keys["up"] = true;
            isJumping = true;
            break;
        }
      }
  
      function keyUp(event) {
        switch (event.keyCode) {
          //Up key up:
          case 38:
            isJumping = false;
            keys["up"] = false;
            break;
            //Right key up:
          case 39:
            keys["right"] = false;
            break;
            //Left key up:
          case 37:
            keys["left"] = false;
            break;
        }
  
      }
  
      function boundsIntersect(x1, y1, x2, y2) {
        if (x1 &gt; x2 - 50 &amp;&amp; x1 &lt; x2 + 200 &amp;&amp; y1 &lt; y2 &amp;&amp; y1 &gt; y2 - 55) {
          return true;
        }
        return false;
      }
  
      function update() {
        window.requestAnimationFrame(update);
        ctx.clearRect(0, 0, 900, 500);
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.fillRect(x_new, y_new, 50, 50);
        //Draw ground:
        ctx.beginPath();
        ctx.rect(0, 490, 900, 10);
        ctx.fillStyle = "green";
        ctx.fill();
  
        //PLayer movement:
        if (keys["up"] &amp;&amp; !keys["right"] &amp;&amp; !keys["left"]) {
          y_new -= speed;
        } else if (keys["right"] &amp;&amp; !keys["up"]) {
          x_new += speed;
        } else if (keys["left"] &amp;&amp; !keys["up"]) {
          x_new -= speed;
        } else if (keys["up"] &amp;&amp; keys["right"]) {
          y_new -= speed;
          x_new += speed;
        } else if (keys["up"] &amp;&amp; keys["left"]) {
          y_new -= speed;
          x_new -= speed;
        }
  
        if (y_new &lt; 440 &amp;&amp; isJumping == false &amp;&amp; isColliding == false) {
          y_new += speed;
        }
  
        //Platforms:
        platform1 = new Platform(plat1X, 350, 200, 10, true);
        platformArray.push(platform1);
  
        platform2 = new Platform(300, 200, 200, 10, false);
        platformArray.push(platform2);
  
        platform3 = new Platform(400, 300, 200, 10, false);
        platformArray.push(platform3);
  
        //Platform intersections:
        platformArray.forEach(function(platform) {
          if (boundsIntersect(x_new, y_new, platform.getX, platform.getY) &amp;&amp; isJumping == false) {
            isColliding = true;
            y_new -= 0.5;
          } else if (boundsIntersect(x_new, y_new, platform.getX, platform.getY) &amp;&amp; isJumping == true) {
            isJumping = false;
            y_new += 11;
            isColliding = true;
          } else {
            isColliding = false;
          }
        });
  
        var platSpeed = 2;
  
        //Move platforms:
        platformArray.forEach(function(platform) {
          if (platform.getMoveable) {
            if (platform.getX &gt; 0 &amp;&amp; platform.getX &lt; 400) {
              plat1X += 1;
            } else if (platform.getX &gt; 0 &amp;&amp; platform.getX &gt; 400) {
              plat1X -= 1
            }
          }
        });
  
        ctx.save();
        ctx.restore();
      }
  
      window.requestAnimationFrame(update);
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What happens is the visual effect of the platform moving is working, however it leaves a trail that I then can not pass through. I know it must have something to do with the fact that I'm not deleting it, but I don't know the specifics of JavaScript.</p>