'onmouseover' an element within a canvas?

Question

I'm making a HTML/JS/CSS game and have came to stop! I'm not sure how I would use the 'onmouseover' tag with an element within my canvas. Please Help!

TRIED:

particle.onmouseover=function(){myScript};

Here's what I have so far:

for (var i = 0; i < 100; i++) { //add particles with random postions
  particles.push(new creat_particle());
}
//function for multiple particles 
function creat_particle() {
  this.x = Math.random() * W;
  this.y = Math.random() * H;
  //Random Color 
  var r = Math.random() * 255 >> 0;
  var g = Math.random() * 255 >> 0;
  var b = Math.random() * 255 >> 0;
  this.color = "rgba(" + r + "," + g + "," + b + ",0.5)";
  //random size 
  this.radius = Math.random() * 45 + 5;
}

Any help appreciated...

You can't really [just put HTML inside of a canvas...](http://stackoverflow.com/questions/19021237/how-to-use-html-content-inside-a-canvas-element) — Mike Cluck, Jul 11 '16 at 16:59
Sorry, i mustn't have mad myself clear, I have been searching the web and can't understand how I would use the onmouseover with an object within a canvas. — , Jul 11 '16 at 17:05
There's no elements/objects in a canvas, it's just a mass of pixels. You've to detect mousemove, and calculate, whether the mouse is on the area you want "mouseover" to fire. — Teemu, Jul 11 '16 at 17:06
If you mean that you're drawing something to the canvas, then you need to [get the mouses position over the canvas](http://stackoverflow.com/q/17130395/371184) and compare that against some object you're using to represent the drawing. For example, get the mouse position then compare it against `particle.x` and `particle.y`, if your `particle` object contains its position information. — Mike Cluck, Jul 11 '16 at 17:07
No, if the mouse touches one of the falling particles, you are redirected to a dead screen. — , Jul 11 '16 at 17:09
@HJRobson Your comment doesn't make any sense. Draw your particles using the canvas API and keep track of their positions. Compare their positions with that of the mouse then do any logic you want at that point. — Mike Cluck, Jul 11 '16 at 17:11
Can you please show some related code you have for this. See [mcve]. Though you're not asking about errors, but we'd get a clue what you're talking about. — Teemu, Jul 11 '16 at 17:11
for (var i = 0; i < 100; i++) { //add particles with random postions particles.push(new creat_particle()); } //function for multiple particles function creat_particle() { this.x = Math.random() * W; this.y = Math.random() * H; //Random Color var r = Math.random() * 255 >> 0; var g = Math.random() * 255 >> 0; var b = Math.random() * 255 >> 0; this.color = "rgba(" + r + "," + g + "," + b + ",0.5)"; //random size this.radius = Math.random() * 45 + 5; } — , Jul 11 '16 at 17:14
@HJRobson Looks like MikeC's second comment answers your question. — Teemu, Jul 11 '16 at 17:17

Krishnakumar_Muraleedharan · Answer 1 · 2016-07-11T17:32:36.847

what you have to do is add a mouseover event for the canvas, get the mouse position and then compare it with the particle position as below.

canvas.onmouseover = function(event) {

    for(i=0;i<100;i++) {
// assuming canvas is positioned at 0,0 of the page
      if(event.clientX => particle[i].x - particle[i].radius&& event.clientX <= particle[i].x + particle[i].radius && event.clientY => particle[i].y - particle[i].radius&& event.clientY <= particle[i].y + particle[i].radius) {
// your event handler code here
      }
     }
   };

There will be a slight inaccuracy as the particle is circular in shape.

'onmouseover' an element within a canvas?

1 Answers1