Q:

How do I update the canvas and call asynchronous methods inside the setInterval function?

Okay here's a better example from: https://www.w3schools.com/graphics/tryit.asp?filename=trygame_component_move ... My question is how do I move the red rectangle first upwards by calling myGamePiece.moveUp(); and AFTER it to the right by calling myGamePiece.moveRight();? because at the moment it happens simultaniously.
Thanks.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
        canvas {
            border:1px solid #d3d3d3;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body onload="startGame()">
<script>

    var myGamePiece;

    function startGame() {
        myGamePiece = new component(30, 30, "red", 10, 250);
        myGameArea.start();
    }

    var myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            this.canvas.width = 480;
            this.canvas.height = 270;
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            this.interval = setInterval(updateGameArea, 20);
        },
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    }

    function component(width, height, color, x, y) {
        this.width = width;
        this.height = height;
        this.x = x;
        this.y = y;
        this.update = function(){
            ctx = myGameArea.context;
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        };

        this.moveUp = function () {
          if(this.y > 50) {
              this.y -= 1;
          }
        };

        this.moveRight = function () {
            if(this.x < 400) {
                this.x += 1;
            }
        }
    }

    function updateGameArea() {
        myGameArea.clear();
        myGamePiece.moveUp();
        myGamePiece.moveRight();
        myGamePiece.update();
    }
</script>
<p>The red square moves one pixel to the right, 50 times per second.</p>
</body>
</html>

A:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    canvas {
      border: 1px solid #d3d3d3;
      background-color: #f1f1f1;
    }
  </style>
</head>

<body onload="startGame()">
  <script>
    var myGamePiece;

    function startGame() {
      myGamePiece = new component(30, 30, "red", 10, 250);
      myGameArea.start();
    }

    var myGameArea = {
      canvas: document.createElement("canvas"),
      start: function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        var onclick = document.createAttribute("onclick");
        onclick.value = "getMousePosition(event)";
        this.canvas.setAttributeNode(onclick);
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
      },
      clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    };

    function component(width, height, color, x, y) {
      this.targetx = undefined;
      this.targety = undefined;
      this.width = width;
      this.height = height;
      this.x = x;
      this.y = y;
      this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      };

      this.moveUp = function() {
        this.y -= 1;
      };

      this.moveRight = function() {
        this.x += 1;
      };

      this.moveDown = function() {
        this.y += 1;
      };

      this.moveLeft = function() {
        this.x -= 1;
      };
    }

    function updateGameArea() {
      myGameArea.clear();
      if (myGamePiece.targetx && myGamePiece.targetx) {
        if (myGamePiece.targetx < myGamePiece.x) {
          myGamePiece.moveLeft();
        } else if (myGamePiece.targetx > myGamePiece.x) {
          myGamePiece.moveRight();
        } else if (myGamePiece.targety < myGamePiece.y) {
          myGamePiece.moveUp();
        } else if (myGamePiece.targety > myGamePiece.y) {
          myGamePiece.moveDown();
        } else {
          myGamePiece.targety = undefined;
          myGamePiece.targetx = undefined;
        }
      }
      myGamePiece.update();

    }

    function getMousePosition(event) {
      var x = event.clientX;
      var y = event.clientY;
      var coords = "X coords: " + x + ", Y coords: " + y;
      console.log(coords);
      myGamePiece.targetx = x;
      myGamePiece.targety = y;
    }
  </script>
  <p>The red square moves one pixel to the right, 50 times per second.</p>
</body>

</html>

What I understood is that you want to do this. Move one up then one right then one up then one right. This is how you can do that. Small differences. EDIT: I understood wrong. I am editing the code now. EDIT2: Added the functionality you asked. EDIT3: UPDATED CODE to make it move where the mouse clicks. Warning. Due to the way the object is rendered on screen it the object does not move exactly centered where you want to go. I recommend to use p5.js framework to handle canvas and not pure javascript. Search for "the coding train" on youtube for tutorials.

