Mouse Hovering/Mouse Clicked over image p5.js

I am trying to create the experience of playing a hand drum. The idea is that the user picks up the drum mallet, hovers it above the drum, and if the user clicks again the drum plays the audio. Is this possible? I have found a lot of resources about shapes, specifically ellipses, but not a lot of information about images.

var drum, mallet;
var x, y, w, h; // Location and size
let dragging = false;
let rollover = false;
let img;
let vel;
let pos;

function preload(){
  
  strike = loadSound('HandDrum.mp3');
  drum = loadImage('handdrum2.png');
  mallet = loadImage('drumMallet.png');
  
 
  
}
function setup() {
  createCanvas(750, 500);
  

  //Dimensions for Moving Stuff
  x = 400;
  y = 100;
  w = 300;
  h = 300;


}

function draw() {
  
  background(220);
  
  tint(219,69,69,250);
  image(drum,125,95,400,400);
  tint(82,217,198);
  //image(mallet,350,100,width/2,height/2);
  
   
  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + 2) {
    rollover = true;
  } else {
    rollover = false;
  }
  // Adjust location if being dragged
  if (dragging) {
    x = mouseX + offsetX;
    y = mouseY + offsetY;
   
  }
  image(mallet, x, y, w, h);
  
}
 

function mousePressed() {

  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
    dragging = true;
    offsetX = x - mouseX;
    offsetY = y - mouseY;
  }
}
function mouseReleased() {
   //Quit dragging
   dragging = false;

}

I figured it out so I am posting my code in case anyone else is looking to solve something similar. If someone else has a more efficient way of solving this feel free to comment/share suggestions.

let drumSound;
let drumImg;
let volSlider;
let drumCircle;
let malletImg;
let drumMallet;
let offsetX, offsetY; 
let dragging = false;

function preload() {
  drumSound = loadSound('HandDrum.mp3');
  malletImg = loadImage('drumMallet.png');
  drumImg = loadImage('handdrum2.png');
}
function setup() {
  createCanvas(700, 500);
  
  drumSound.playMode('restart');
  volSlider = createSlider(0, 1, 0.5, 0.01);
  volSlider.position(130, 40);
  
  drumCircle = new Drumcircle(width/2 - 150, height/2 - 150, 300, 300);
  drumMallet = new DrumMallet(width / 2 +80, height / 2 - 220, 300, 300);
}

function mousePressed() {
  drumCircle.clicked(mouseX, mouseY);
  
    if (mouseX > drumMallet.x && mouseX < drumMallet.x + drumMallet.sizeX &&
      mouseY > drumMallet.y && mouseY < drumMallet.y + drumMallet.sizeY) {
    dragging = true;
    offsetX = mouseX - drumMallet.x;
    offsetY = mouseY - drumMallet.y;
  }
}
function mouseReleased() {
  dragging = false;
}

class Drumcircle {
  constructor(x, y, sizeX, sizeY) {
    this.name = 'DrumCircle';
    this.drumImg = drumImg;
    this.x = x;
    this.y = y;
    this.sizeX = sizeX;
    this.sizeY = sizeY;
  }
  
  display() {
    image(this.drumImg, this.x, this.y, this.sizeX, this.sizeY);
  }
  
  clicked(x, y) {
    let radialDistance = dist(x, y, width/2, height/2);
    if (radialDistance < 140 &&mouseX > drumMallet.x && mouseX < drumMallet.x + drumMallet.sizeX &&
      mouseY > drumMallet.y && mouseY < drumMallet.y + drumMallet.sizeY) {
      drumSound.play();
      print('play drum');
    } else {
      print('silence');
    }
  }
}
class DrumMallet {
  constructor(x, y, sizeX, sizeY) {
    this.x = x;
    this.y = y;
    this.sizeX = sizeX;
    this.sizeY = sizeY;
  }

  display() {
    image(malletImg, this.x, this.y, this.sizeX, this.sizeY);
  }
}

function draw() {
  background(0, 24, 25);
  
  drumSound.setVolume(volSlider.value());
  
  let volText = 'Volume';
  textSize(12);
  fill(255);
  stroke(0);
  strokeWeight(2);
  text(volText, 85, 45, 70, 80);
  
   if (dragging) {
    drumMallet.x = mouseX - offsetX;
    drumMallet.y = mouseY - offsetY;
  }
  
  drumCircle.display();
  drumMallet.display();
}