Question

I m working on a canvas style graphical interface using VS asp.net. I would like to create speech-bubbles with individual events. For example – the red-dot on my screen, if the client clicks on it, a speech bubble will appear to give more information about the event.

How do I make those events interactable ?

Right now I am I m using a simple canvas:

<canvas id="myCanvas" width="930" height="900"style="border:2px solid #000000;"></canvas> 

// function to draw a circle - x,y, radius, color: coordinates, radius and the color of the circle.
                function draw_circle(x, y, radius, color) {
                        ctx.beginPath();
                        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
                        ctx.fillStyle = color;
                        ctx.fill();
                        ctx.stroke();
                    }

// function to draw a triangle - x: Life event's x-coordinate on the timeline.
                function draw_triangle(x) {
                        ctx.fillStyle = 'purple';
                        ctx.strokeStyle = 'white';
                        ctx.lineWidth = 1;
                        ctx.beginPath();

                        ctx.moveTo(x, 560);
                        ctx.lineTo(x+5, 550);
                        ctx.lineTo(x-5, 550);
                        ctx.lineTo(x, 560);

                        ctx.fill();
                        ctx.stroke();
                        ctx.closePath();
                    }

etc..

I believe to make these events – circle, bar lines, triangles more interactable with speech bubble, I will have to modify this code… Can these javascript functions be made to be interactable? hoverover or onclick?

I looked at speech bubbles

http://www.scriptol.com/html5/canvas/speech-bubble.php

but I want something only related to specific events based on client side mouse click. only.

I want something like this:-

http://simile-widgets.org/wiki/Timeline_CustomEventDetailDisplay

But tailored to the code I am using.

Answer 1

If you want to draw a speech bubble on the canvas in response to a mouse click/hover, you have to capture the mouse x and y relative to the canvas position on the page, then determine if the part of the canvas that holds that circle was clicked/hovered.

Personally I would create an object for each clickable region, give it x/y/width/height properties and then call a function when it is clicked. Something like this:

<canvas id="myCanvas" width="930" height="900"style="border:2px solid #000000;"></canvas>

var buttons = [];

var mouse = 
{
    x: 0,
    y: 0
}

var buttons[] = new Button(100, 100, 100, 100, 'speechbubble');

window.addEventListener('load', function()
{
    addEventListener('mousemove', function(evt)
    {
        getMousePos(evt);
    }, false);

    addEventListener('click', clickHandler, false);

}, false);

function getMousePos(e)
{
    mouse.x = e.pageX - document.getElementById('myCanvas').offsetLeft;
    mouse.y = e.pageY - document.getElementById('myCanvas').offsetTop;
}

function clickHandler()
{
    for (var i = 0; i < buttons.length; i++)
    {
        if (buttons[i].inBounds()) buttons[i].execute();
    }
}

function Button(x, y, w, h, func)
{
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
    this.func = func;
}

Button.prototype.execute = function()
{
    switch (this.func)
    {
        case 'speechbubble':
            // do stuff here
        break;
    }
}

Button.prototype.inBounds = function()
{
    if (mouse.x > this.x && mouse.x < this.x + this.width &&
        mouse.y > this.y && mouse.y < this.y + this.height) return true;
}