CODEWITHSUNDEEP
jqueryhtml5-canvas
bRaNdOn
bRaNdOn

Reputation: 1082

Event on hovered drawing jquery canvas

ctx.beginPath();
ctx.moveTo((width - BarSpace * (i + 1)) - ((BarSpace - 10) / 2), (yMax - data.open) * Valuesteps);
ctx.lineTo((width - BarSpace * (i + 1)) - ((BarSpace - 10) / 2), (yMax - data.close) * Valuesteps);
ctx.lineTo((width - BarSpace * (i + 1)) + ((BarSpace - 10) / 2), (yMax - data.close) * Valuesteps);
ctx.lineTo((width - BarSpace * (i + 1)) + ((BarSpace - 10) / 2), (yMax - data.open) * Valuesteps);
ctx.lineTo((width - BarSpace * (i + 1)) - ((BarSpace - 10) / 2), (yMax - data.open) * Valuesteps);
ctx.fillStyle = "green";
ctx.fill();
ctx.stroke();

That drawing on canvas is a box, I just need to display some sort of data when the box that I draw is hovered in canvas is there a possible way to do it? And event would listen if my mouse is hovered on that box.

Upvotes: 1

Views: 71

Answers (1)

user1693593
user1693593

Reputation:

Canvas is just a passive bitmap. Anything drawn to it will just blend in with whatever else is there and the browser won't be able to distinguish one drawing from another.

In order to achieve this you need to implement the logic yourselves.

A typical way of doing this is to store shapes in a shadow-array that you do the main handling on, then use canvas only to render what is in your array.

For example, for a box you could simply use a custom rectangle object:

function Rect(x, y, width, height, fColor, sColor) {

    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.fillStyle = fillColor || 'rgba(0, 0, 0, 0)';
    this.strokeStyle = strokeColor || '#000';

    this.render = function(ctx) {
         ctx.fillStyle = this.fillStyle;
         ctx.strokeStyle = this.strokeStyle;
         ctx.fillRect(this.x, this.y, this.width, this.height);
         ctx.strokeRect(this.x, this.y, this.width, this.height);
    }
}

Now you can create your box like this:

/// calc x, y, w, h based on the line coordinates you already have
var rect1 = new Rect(x, y, w, h, 'green', '#f00');

Then render it to canvas when you need to update it:

rect1.render(ctx);

To handle mouse hover:

var isInside = false;

canvas.onmousemove = function(e) {

    /// correct mouse position
    var rect = canvas.getBoundinClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    if (x >= rect1.x && x < rect1.x + rect1.width &&
        y >= rect1.y && y < rect1.y + rect1.height &&
        !isInside) {

        isInside = true; /// prevent unnecessary redraw of same state

        rect1.fillStyle = '#f90';
        rect1.render(ctx);

    } else if (isInside) {
         isInside = false; /// reset flag

        rect1.fillStyle = 'green';
        rect1.render(ctx);
    }
}

To trigger some action use about the same code:

canvas.onclick = function(e) {

    /// correct mouse position
    var rect = canvas.getBoundinClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    if (x >= rect1.x && x < rect1.x + rect1.width &&
        y >= rect1.y && y < rect1.y + rect1.height) {

        callFunctionHere();
    }
}

Hope this will help you in the right direction.

Upvotes: 1

Related Questions