Creating a maze in p5.js using mouseX/Y, if-statements and image

I have been working on a new project "Maze", that's quite simple, but since I´m new to the program it´s a bit harder then i thought.

The problem is that i can´t place the background behind the image so that the object "circle" doesn´t duplicate itself all the time.

The other problem is that I want the mouseX and mouseY to start at (325, 75) and after that it changes position when i move the mouse.

The last thing I need help with is that when the circle/object hits the lines on the maze, it restarts at the position again.

let img;
let bacCol = "#ebf4ff";
let bg;
let xPos=325;
let yPos = 75;
let temp = 1;

function preload() {
  img = createImg("https://i.ibb.co/qWp4xJD/labyrint.png");
}

function setup() {
  createCanvas(700, 700);
  bg = loadImage("https://i.ibb.co/qWp4xJD/labyrint.png");
  img.hide();
}

function draw() {

  let col = {
    r: random(50, 255),
    g: random(50, 255),
    b: random(50, 255)
  }  

  image(img, 0,0,width,height);
  noStroke();
  fill(col.r, col.g, col.b);
  circle(xPos, yPos, 20);
  if(temp ===1){
    xPos = mouseX;
    yPos = mouseY;
  }


}

function keyPressed() {
  temp = 1;
}

Hopefully, i can get some help with this! Thanks in advance :)