CODEWITHSUNDEEP
javascriptjquerycanvasmouseevent
Alon Shmiel
Alon Shmiel

Reputation: 7121

mouseClick on part of my canvas, mouseOver the canvas and mouseOut the canvas

I am trying to attach a mouse over and mouse out events for the canvas:

the default canvas is the canvas of the function drawcircle.

if the user overs the canvas, it should be changed to the canvas of drawEllipse and when he overs out, it should be changed to drawCircle.

in addition, I want to print a message to the screen when the user presses the small lightblue circle (alert a message).

I read that I have to define: mouseup and mousedown for the mouse over and mouse out but I realy don't know how.

http://jsfiddle.net/alonshmiel/c4upM/9/

maybe something like:

getPressedCanvasPixel('canvas');

function getPressedCanvasPixel(canvasElement) {
    canvas = document.getElementById(canvasElement);
    canvas.addEventListener("mousedown", alertPressedPixel, false);
}

function alertPressedPixel(event) {
    canvas_x = event.pageX;
    canvas_y = event.pageY;
    alert(canvas_x + ' , ' + canvas_y);
}

any help appreciated!

Upvotes: 0

Views: 289

Answers (1)

Tony
Tony

Reputation: 7445

Using jQuery is ok? If so, try something like this:

$('#canvas').on('mouseenter', function() {
    console.log('enter'); // do your actions
})
.on('mouseleave', function() {
    console.log('exit'); // do your actions
});

As for the little circle, you need to save its coorditates and handle mouse click event, you actually do it, so just add checking for coordinates if they are close to your circle.

Upvotes: 2

Related Questions