How do i rotate a sprite towards the mouse in p5.play?

Question

i'm makig a top-down shooter game using the p5.play(p5) libraries. I want to rotate the player sprite towards the mouse. with the Atan2 function(https://p5js.org/reference/#/p5/atan2). i managed to rotate an image using this. but when i try to rotate the sprite, the rotation is not correct at all. how do i solve this?

//variables
var player1;
var gun1;
var gun2;

function preload(){
 crosshair = loadImage("crosshairmouse.png")
 
}

function setup(){
    //creating sprites
    player1 = createSprite(200,200,30,30)
    gun = createSprite(player1.x,player1.y-20,5,30)
    gun.shapeColor = "black"
}

function draw(){
  canvas = createCanvas(displayWidth-20, displayHeight-120);
   background("#32CD32");

   gun.x = player1.x;
   gun.y = player1.y-15;

   // functions to move
   //up
  if(keyDown("up")){
    player1.y = player1.y - 5;
  }
  //down
  if(keyDown("down")){
    player1.y = player1.y + 5;
  }
  //right
  if(keyDown("right")){
    player1.x = player1.x + 5;
  }
  //left
  if(keyDown("left")){
    player1.x = player1.x - 5;
  }

push()
imageMode(CENTER)
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  //image(crosshair,40,40)
  player1.rotation = a;
pop()

 

drawSprites();
}