I am trying to make a 2d game. I am using this sprite sheet:

I want to make the animation of the character when he moves, but every time I move the character (with the keyboard arrows), the character moves to my chosen side, but in glitchy way, and doesn't move with the animation.

There is my code:

let walkCycle = [0, 1, 2, 3];
let walkIndex = 0;

let width = 50;
let height = 60;
let SCALE = 2;
let SCALED_WIDTH = SCALE * width;
let SCALED_HEIGHT = SCALE * height;

function drawFrame(frameX, frameY, canvasX, canvasY) {
  context.drawImage(
   heroImg,
   frameX * width,  
   frameY * height,  
   width, 
   height, 
   canvasX, 
   canvasY, 
   SCALED_WIDTH,
   SCALED_HEIGHT
 );
}

let DOWN = 0;
let UP = 2;
let LEFT = 3;
let RIGHT = 1;

let currentDirection = DOWN;

function moveHero() {
  let hasMoved = false;

  if (38 in keysDown) {
    
    moveChar(0, -1, UP);
    hasMoved = true;
  }
    if (40 in keysDown) {
    
    moveChar(0, 1, DOWN);
    hasMoved = true;
  }
    if (37 in keysDown) {
    
    moveChar(-1, 0, LEFT);
    hasMoved = true;
  }
    if (39 in keysDown) {
    
    moveChar(1, 0, RIGHT);
    hasMoved = true;
    }
   if (!hasMoved) {
    walkInex = 0;
   }
   if (hasMoved) {
     
     walkIndex++;
     if (walkIndex >= walkCycle.length) {
       walkIndex = 0;
    }
  }
  drawFrame(walkCycle[walkIndex],
   0, hero.x, hero.y);
}