title: Why my rectangle does not move when i update x-axis?
body: <p>I am trying to make simple animation in canvas, trying to move a rectangle to right by updating x-axis but it does not work I don't know why?</p>
  
  <p>I am stuck, i need help and thanks?</p>
  
  <p>class main </p>
  
  <pre><code>// import zone
  import Player from "./player.js";
  import Loop from "./loop.js";
  
  // var zone
  let canvas = document.getElementById("canvas"); // get canvas
  let display = canvas.getContext("2d"); // get context
  let loop;
  loop = new Loop(canvas, display); // instance loop
  
  // draw loop
  function drawLoop() {
  
    loop.player.point.x++;
    loop.update(); // update
    loop.draw(); // draw
    requestAnimationFrame(drawLoop); // loop
  }
  // invoke
  drawLoop();
  </code></pre>
  
  <p>class loop</p>
  
  <pre><code>// import zone
  import Player from "./player.js";
  // class
  export default class Loop {
    // init
    constructor(canvas, display) {
      this.canvas = canvas;
      this.display = display;
      this.player = new Player(this.canvas, this.display);
    }
    // update
    update() {
      this.player.update();
    }
    // draw
    draw() {
      this.player.draw();
    }
  }
  </code></pre>
  
  <p>class player</p>
  
  <pre><code>// import zone
  import Size from "./size.js";
  import Point from "./point.js";
  
  // class
  export default class Player {
    constructor(canvas, display) {
      this.display = display;
      this.canvas = canvas;
      this.point = new Point(200, 200);
      this.size = new Size(100, 25);
    }
    // update
    update() {
      this.point.x++; // trying to update x but the rect does not move  
    }
    // draw
    draw() {
      this.display.fillStyle = "#ffffff";
      this.display.fillRect(this.point.x, this.point.y, this.size.w, this.size.h);
    }
  }
  </code></pre>
  
  <p>class point</p>
  
  <pre><code>export default class Point {
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }
  }
  </code></pre>
  
  <p>The rectangle should move by 1 pixel to the right, thanks.</p>