html5 – Issue with sprite animation


I have been trying to get my player to animate for some time now and i’ve read multiple tutorials but i cant seem to achieve this. The tutorial i am following is at : https://www.simplifiedcoding.net/javascript-sprite-animation-tutorial-html5-canvas/

I create the player of a component class:

mySprite = new component(168, 33, "Images/Run/character.png", 0, 0, "sprite");

Then i create the component class with an update function:

function component(width, height, color, x, y,type) 
{
  this.width = width;
  this.height = height;
  this.type = type;
  if (type == "image" || type == "background" || type == "sprite" ) {
    this.image = new Image();
    this.image.src = color;
  }
  this.x = x;
  this.y = y;


  this.update = function()
  {
  ctx = myGameArea.context;
  if (this.type == "sprite") 
    { 
     var curFrame = 0;
     curFrame = ++curFrame % 8; 
     var srcX =0;       
     srcX = curFrame * this.width /8; 
     ctx.drawImage(this.image,srcX,y,this.width/8,this.height,x,y,this.width/8,this.height);
    } 

  }
  this.newPos = function() 
  {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
    this.hitBottom();
    this.jumpGravity();
    if (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    } 
}
}

Then i call both update and newPos functions in the game loop:

mySprite.newPos();
mySprite.update();
I am hoping someone could advise what i am doing wrong.