Clicking or hovering over multiple images in canvas?

Question

I am working on a project for my programming class. I'd like to essentially have a canvas with a background element (say a room.jpg) and then maybe three interactive objects in the room (lamp.jpg, couch.jpg, desk.jpg). I'd like for it to be that if you hover over the lamp a small box or text pops out, giving you some information. Or maybe have it so if you click an image, the same concept happens. You know, something interactive with the objects in the canvas. Again, I'm new to canvas but we have to use it in our assignment. My current code is:

function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            // get num of sources
            for(var src in sources) {
                numImages++;
                }
            for(var src in sources) {
                images[src] = new Image();
                images[src].onload = function() {
                if(++loadedImages >= numImages) {
                callback(images);
                    }
                };
            images[src].src = sources[src];
                }
            }

            var sources = {
            room: 'room.jpg',
            title: 'title.jpg'
            };

            loadImages(sources, function(images) {
            context.drawImage(images.room, 0,0);
            context.drawImage(images.title, 0,0);
            });
            }

But from what I understand, it makes the two jpegs a "permanent" canvas element (unable to be messed with). I had been trying to get it so that when I clicked I'd go from the title.jpg to the room.jpg but I've since given up. Essentially, all I want now is just to have the room.jpg appear when the page is first loaded, and have three other png objects on top (as objects in the room). Are these able to be interacted with, or do I have to put the images into the canvas in another way? Thanks for all your help and your patience!

Think of html canvas element as a painting hanging on the wall. After you paint something on it, nothing will change and you can't interact with anything on the painting. To "change" something on the canvas, you (1) erase the canvas with context.clearRect and then (2) issue new drawing commands to create your new content. To interact with the user you listen for mouse events (for example using canvas.addEventListener. Based on the mouse events, you erase the canvas and redraw the images in new positions. — markE, Dec 15 '14 at 22:21

score 0 · Answer 1 · answered Dec 16 '14 at 13:56

// --- Image Loader ----
var images = {};
var loadedImages = 0;
var pictures = {
    room: 'room.jpg',
    title: 'title.jpg'
    lamp1: 'lampoff.jpg'
    lamp2: 'lampon.jpg'
};
function loadImages(sources, callback) {
    var numImages = 0;
    for(var src in sources)numImages++;

    for(var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if(++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}



// --- Mouse Down Functionality ----
$('#canvas').addEventListener('mouseDown', function(e){
    if(e.clientX){
        var rect = this.getBoundingClientRect();
        if(rect)            clickCanvas(e.clientX - rect.left, e.clientY - rect.top)
        else                clickCanvas(e.clientX  - this.offsetLeft, e.clientY - this.offsetTop);
    }else if(e.offsetX)     clickCanvas(e.offsetX, e.offsetY);
    else if(e.layerX)       clickCanvas(e.layerX, e.layerY);
    else console.warn("Couldn't Determine Mouse Coordinates");
})


var lampOn;

function drawCanvas(showLamp){
    lampOn = showLamp;
    canvas.width = canvas.width //clears canvas
    context.drawImage(images.room, 0,0);
    context.drawImage(images.title, 0,0);
    if(lampOn){ 
        context.drawImage(images.lamp2, 100,100);
    }else{
        context.drawImage(images.lamp1, 100,100);
    }
}   

function clickCanvas(x,y){
    console.log('clicked canvas at:',x,y)
    if(clickedLamp){
        drawCanvas(!lampOn)
    }
}

loadImages(pictures, function(images) {
    drawCanvas(false)
});

Make sure to replace "clickedLamp" and "#canvas"! The idea here is that you redraw the same canvas, using the same function. Everytime you modify any of it, you rerender ALL of it. See if you can get this example working, it will help clarify alot. If you don't understand something comment

Clicking or hovering over multiple images in canvas?

1 Answers1