0

I have a canvas picture made in javascript and i want to check if the mouse cursor is hovering over the canvas. this is how my code looks like

window.onload = function() {     
     var Gamecanvas = document.getElementById('game');
     var GameCTX = Gamecanvas.getContext('2d');
     function soapDraw() {
         var soap = new Image();
         soap.src = 'Soap.png';         
         soap.onload = function() {
              GameCTX.drawImage(soap, 5, 5);
         };
     };
     soapDraw(); 
}

this code loads a image of soap and i want to if the cursor hovers over the soap, it moves, though i am not onto the moving part yet...

I do not want any jquery answers. I want javascript non-query answers

I tried jquery answers on other forums but i have no experience with jquery and i dont know how to adjust it to my needs.

Edit: this is how my site looks like: this website picture

Intermaker
  • 15
  • 5
  • has you use canvas, your soap element is not a DOM element on the interface, all is pixels values are copied inside your DOM canvas. There is no way to use any event on your soap element. You may use any hover on the canvas, or even add any areas to get event on it. – Mister Jojo Feb 23 '23 at 22:34
  • @MisterJojo you don't know how big the canvas is. in my case. I already knew this and I made the canvas as big as the soap – Intermaker Feb 23 '23 at 23:43
  • No need to thank me, but the next time you ask a question, consider providing this kind of information, it will save me [and others] from wasting time trying to help you. – Mister Jojo Feb 24 '23 at 01:17

1 Answers1

0

you can use an event listener directly on canvas and watching for mouseover event

Gamecanvas.addEventListener('mouseover', (event) => { /* your code goes here */});

for a more complete answer look here

Gone
  • 111
  • 7