How to stop sprite on collision (Keep it from walking on walls)?

Question

Thanks to ellertsmari, I am able to get collision detection. Adding Collision to Rectangles so Sprite Wont Go Through?

Just now I want to get my sprite to stop on collision so he won't be walking on walls.

Here's my link to the game: https://yewtreedesign.github.io/441_HW/HW11/index.html

Here's the source code that helped me to use sprites. https://dev.to/martyhimmel/moving-a-sprite-sheet-character-with-javascript-3adg

so I figure that :

positionX + deltaX > 0 (checks for left edge collision.)

positionX + SCALED_WIDTH + deltaX < canvas.width (checks for right edge collision.)

positionY + deltaY > 0 (checks for top edge collision.)

positionY + SCALED_HEIGHT + deltaY < canvas.height (checks for bottom edge collision.)

I've tried using the guide of how collision is detected on the sprite. I have accomplished getting the collision detection on the rectangles.

I've tried to add walls.x, walls.y, walls.width, and walls.height within the code where it prevents the sprite from going out of boundaries. My sprite still gets stuck on his starting point. I am not sure what I need to do. I am very new at this. I know instead of canvas.height/canvas.width. I should use walls.height/walls.widthfor the walls.

const SCALE = 1;
const WIDTH = 18;
const HEIGHT = 31;
const SCALED_WIDTH = SCALE * WIDTH;
const SCALED_HEIGHT = SCALE * HEIGHT;
const CYCLE_LOOP = [0, 1, 0, 2];
const FACING_DOWN = 0;
const FACING_UP = 1;
const FACING_LEFT = 2;
const FACING_RIGHT = 3;
const FRAME_LIMIT = 12;
const MOVEMENT_SPEED = 1;
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
let keyPresses = {};
let currentDirection = FACING_DOWN;
let currentLoopIndex = 0;
let frameCount = 0;
let positionX = 0;
let positionY = 0;
let img = new Image();
let shiba = new Image();
let rays = new Image();
let doritos = new Image();
let walls=     [{"id": "wall1", "x": 105.3, "y": -1,    "width": 14.1, "height": 73.5},
                {"id": "wall2", "x": 366.5, "y": -1,    "width": 14.1, "height": 73.5},
                {"id": "wall3", "x": 367,   "y": 173.2, "width": 120,  "height": 14.1},
                {"id": "wall4", "x": -1,    "y": 173.2, "width": 120,  "height": 14.1},
                {"id": "wall5", "x": 105.3, "y": 267.5, "width": 14.1, "height": 73.5},
                {"id": "wall6", "x": 366.5, "y": 267.5, "width": 14.1, "height": 73.5}
              ];
              function drawWalls(){
                for(var i=0; i< walls.length; i++){
                  ctx.fillStyle="white";
                  ctx.fillRect(walls[i].x, walls[i].y, walls[i].width,walls[i].height);
                }
            }
            function collidingWith(walls){
              console.log("you are colliding with:", walls.id);

}
window.addEventListener('keydown', keyDownListener);
function keyDownListener(event) {
    keyPresses[event.key] = true;
}
window.addEventListener('keyup', keyUpListener);
function keyUpListener(event) {
    keyPresses[event.key] = false;
}
function loadImage() {
    img.src = 'atlus/mainsprite.png';
  shiba.src = 'image/shiba.gif';
  rays.src='image/shades.png';
  doritos.src='image/dorit.png';
  img.onload = function() {
    window.requestAnimationFrame(gameLoop);
  };
}
function drawFrame(frameX, frameY, canvasX, canvasY) {
  ctx.beginPath();
  ctx.drawImage(shiba, 225,20);
  ctx.closePath();
  ctx.beginPath();
  ctx.drawImage(rays, 400,20);
  ctx.drawImage(doritos, 420,250);
  ctx.drawImage(img,
                frameX * WIDTH, frameY * HEIGHT, WIDTH, HEIGHT,
                canvasX, canvasY, SCALED_WIDTH, SCALED_HEIGHT);
  ctx.closePath();
}

loadImage();
function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawWalls();

  let hasMoved = false;
  if (keyPresses.ArrowUp) {
    moveCharacter(0, -MOVEMENT_SPEED, FACING_UP);
    hasMoved = true;
  } else if (keyPresses.ArrowDown) {
    moveCharacter(0, MOVEMENT_SPEED, FACING_DOWN);
    hasMoved = true;
  }
  if (keyPresses.ArrowLeft) {
    moveCharacter(-MOVEMENT_SPEED, 0, FACING_LEFT);
    hasMoved = true;
  } else if (keyPresses.ArrowRight) {
    moveCharacter(MOVEMENT_SPEED, 0, FACING_RIGHT);
    hasMoved = true;
  }
  if (hasMoved) {
    frameCount++;
    if (frameCount >= FRAME_LIMIT) {
      frameCount = 0;
      currentLoopIndex++;
      if (currentLoopIndex >= CYCLE_LOOP.length) {
        currentLoopIndex = 0;
      }
    }
  }
  if (!hasMoved) {
    currentLoopIndex = 0;
  }
  drawFrame(CYCLE_LOOP[currentLoopIndex], currentDirection, positionX, positionY);
  window.requestAnimationFrame(gameLoop);
}
function moveCharacter(deltaX, deltaY, direction) {
  walls.forEach(walls=>{
  if( positionX + deltaX + SCALED_WIDTH > walls.x && positionX + deltaX < walls.x + walls.width
    && positionY + deltaY + SCALED_HEIGHT > walls.y && positionY + deltaY < walls.y +walls.height
  ){
    collidingWith(walls);
  }
})

if (positionX + deltaX > 0 && positionX + SCALED_WIDTH + deltaX < canvas.width) {positionX += deltaX;}
if (positionY + deltaY > 0 && positionY + SCALED_HEIGHT + deltaY < canvas.height) {positionY += deltaY;}
  currentDirection = direction;
}

Everything is showing up as it should. In the console, once you collided with one of the walls, it will show you have collided with wall[i]. Which is great. I just need help so my sprite won't be walking on walls.

UPDATE:

The sprite does stop when colliding with the wall... Problem is that teleports back to it's begining position... https://jsfiddle.net/YewtreeStudio/b1v9Loey/4/