How to show a caption when hovering over a html5 canvas image objects

i have create html canvas and placed images on it using javascript. now i want when some one hover or click on image it shoud popup the name of the image or if an image is charactors some wordings. Please advice me how to identofy particular objects with click or mouse hover.

please refer my current code

image 01

    var kotuReady = false;
var kotuImage = new Image();
kotuImage.onload = function ()
{
    kotuReady = true;
};
kotuImage.src = "kotu125_1.gif";


    function drawStuff()
{
//Resize HTML5 canvas to fit window
        ctx.canvas.width  = window.innerWidth;
        ctx.canvas.height = window.innerHeight;


        ctx.drawImage(kotuImage, 80, 450);
        }

Please advice

Answers


  1. You to keep images in an array (or other kind of container), with their sizes and positions. Like

    { id: 23, x: 10, y: 20, width: 200, height: 150; } I use id field here, because you should identify image somehow if want to delete or refresh or etc.

  2. Add event listeners on mosedown, mouseup and mousemove events. On mousedown get position of mouse towards canvas

    function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; }

  3. Iterate through all images in image array and check their position towards mouse position. If mouse was clicked on image, then draw tip. Note that if images on canvas are overlapped, then you should find topmost image. Topmost image would be the latest image you have drawn.

  4. Ask more...

UPD

<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800px" height="600px"/>
        <script>
var c = document.getElementById("canvas");
ctx = c.getContext("2d");

var images = [];

function addImageOnCanvas(ctx, src, posx, posy, width, height, id) {
    var kotuImage = new Image();
    kotuImage.src = src;
    ctx.drawImage(kotuImage, posx, posy);
    images.push({
        id: id,
        x: posx,
        y: posy,
        width: width,
        height: height
    });
}

addImageOnCanvas(ctx, "boobs.jpg", 20, 20, 194, 260, 1);
addImageOnCanvas(ctx, "boobs.jpg", 50, 50, 194, 260, 2);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return { 
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}
ctx.font = "30px Arial";
function drawTooltip(x, y, msg) {
    ctx.fillText(msg, x, y);
}
function mousedownevent(event) {
    var coord = getMousePos(c, event), i;
    //optimization needed
    console.log("[" + coord.x + ", " + coord.y + "]");
    for (i = images.length-1; i > -1; i--) {
        if (images[i].x < coord.x && images[i].x > coord.x - images[i].width && 
            images[i].y < coord.y && images[i].y > coord.y - images[i].height) {
            drawTooltip(coord.x, coord.y, images[i].id);
            break;
        }
    }
}
c.addEventListener("mousedown", mousedownevent, false);

        </script>
    </body>
</html>

Explanation: When you draw image on canvas you just copy part of bitmap. So canvas doesn't know that there are some objects, it just stores pixels. So you have to keep imformation about objects on bitmap somewhere else.

P.S. There are more questions after that. How to write tooltip and destroy it after: well, as I couldn't find any way to copy parts of bitmap (ImageData) the easiest way is to work with two canvas, one just over another. Or, to redraw whole objects. But that is slow and will cause many bad visual effects, like blinking.


Need Your Help

Absolute file path for DLL in PE executable file?

windows dll pe

I have a program (MyProg.exe) that takes an EXE file in PE format (OldExe.exe), and creates a new EXE file (NewExe.exe) with a different ".rsrc" section. It works fine, under Windows XP and Windows...

android cannot get the text and do the login

java android login

I am trying to create a login page to my Android App. I have 2 editview and a button. I am using a static user credentials to login. when I run the app, and try to login with the correct username and

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.