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;

}

[![drum mallet image][1]][1]
[![Handdrum Image][2]][2]
[1]: https://i.sstatic.net/37AZH5lD.png
[2]: https://i.sstatic.net/Im5H1nWk.png