using images as buttons on html canvas

Question

So I've managed to get javascript code to track the cursor over images displayed on an html canvas thanks to markE, but now I'm trying to treat each one of the images as a button and display a different image when the cursor is hovering. So far, thru many permutations, I have not been able to store an image, or image pathname into an array element that also contains the points we are using to contain the path. Here is the code:

<script type="text/javascript" language="JavaScript">

    var canvas;
    var canvasWidth;
    var ctx;

    function init() {
        HideContent('readLess');

        var cursors=['default','w-resize','n-resize'];
        var currentCursor=0;

        canvas = document.getElementById('puzzle-container');
        canvas.width = 815;
        canvas.height = 425;
        canvas.align = 'center';
        ctx = canvas.getContext("2d");

        var search = new Image();
        search.src = 'img/puzzleSearch.png';
        var searchHover = new Image();
        search.onload = function() {
            ctx.drawImage(search, 0, 0);
        };
        var nav = new Image();
        nav.src = 'img/puzzleNav.png';
        var navHover = new Image();
        nav.onload = function() {
            ctx.drawImage(nav, 119, 2.5 );
        }
.
.
.           
        var events = new Image();
        events.src = 'img/puzzleEvents.png';
        var eventsHover = new Image();
        eventsHover.src = 'img/puzzleEventsHover.png';
        events.onload = function() {
            ctx.drawImage(events, 564, 265 );
        }

        function reOffset(){
            var BB=canvas.getBoundingClientRect();
            offsetX=BB.left;
            offsetY=BB.top;        
        }
        var offsetX,offsetY;
        reOffset();
        window.onscroll=function(e){ reOffset(); }
        window.onresize=function(e){ reOffset(); }


        $("#puzzle-container").mousemove(function(e){handleMouseMove(e);});

        var shapes=[];
        shapes.push({
                points:[{x:0,y:2.5},{x:155,y:2.5},{x:155,y:205},{x:0,y:205}], cursor:1, img:search, imgHov:searchHover,
        });

.
.
.   
        shapes.push({
                points:[{x:0,y:310},{x:250,y:310},{x:250,y:400},{x:0,y:400}], cursor:1, img:events, imgHov:'img/eventsHover.png',
        });

        for(var i=0;i<shapes.length;i++){
            var s=shapes[i];
            definePath(s.points);
            ctx.stroke();
        }

        function definePath(p){
            ctx.beginPath();
            ctx.moveTo(p[0].x,p[0].y);
            for(var i=1;i<p.length;i++){
                ctx.lineTo(p[i].x,p[i].y);
            }
            ctx.closePath();
        }

        function handleMouseMove(e){
            // tell the browser we're handling this event
            e.preventDefault();
            e.stopPropagation();

            mouseX=parseInt(e.clientX-offsetX);
            mouseY=parseInt(e.clientY-offsetY);

            // Put your mousemove stuff here
            var newCursor;
            for(var i=0;i<shapes.length;i++){
                var s=shapes[i];
                definePath(s.points);
                if(ctx.isPointInPath(mouseX,mouseY)){
                    if (i === 6 ) {
                        var img = new Image();
                        var imgSrc = s.imgHov;
                        img.src = imgSrc;
                        console.log("hover image is: " + s.imgHov );
                        ctx.drawImage(img, 564, 265 );
                    }
                    newCursor=s.cursor;
                    break;
                }
            }
            if(!newCursor){
                if(currentCursor>0){
                    currentCursor=0;
                    canvas.style.cursor=cursors[currentCursor];              
                }
            }else if(!newCursor==currentCursor){
                currentCursor=newCursor;
                canvas.style.cursor=cursors[currentCursor];              
            }
        }



    }

    function HideContent(d) {
        document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
        document.getElementById(d).style.display = "block";
    }
    function ReverseDisplay(d) {
        if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
        else { document.getElementById(d).style.display = "none"; }
    }

</script>

I've tried storing the image variables in the array, the image pathnames in the array, but always end up getting 404 errors when it tries to load the image when I hover over it with the cursor. If I hard code an image name and load, it will be displayed when the cursor hovers over that path.

What am I doing wrong to store the image names and/or paths in the array of points so I can access it when I am tracking cursor movement?

Thanks.....

Answer 1

Your fix is to preload all your images before using them.

Images do not load immediately. When you set the img.src the browser begins loading the image but also continues onto the next line of code even before the image is fully loaded.

The problem is here:

// the browser BEGINS to load the image, but simultaneously
// continues executing the code that follows.
img.src = imgSrc;

// img has not yet loaded when drawImage is executed 
ctx.drawImage(img, 564, 265 );

There are dozens of image pre-loaders available. Here's just one:

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// put the paths to your images in imageURLs[]
var imageURLs=[];  
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");

// the loaded images will be placed in imgs[]
var imgs=[];
var imagesOK=0;
startLoadingAllImages(imagesAreNowLoaded);

// Create a new Image() for each item in imageURLs[]
// When all images are loaded, run the callback (==imagesAreNowLoaded)
function startLoadingAllImages(callback){

  // iterate through the imageURLs array and create new images for each
  for (var i=0; i<imageURLs.length; i++) {
    // create a new image an push it into the imgs[] array
    var img = new Image();
    // Important! By pushing (saving) this img into imgs[],
    //     we make sure the img variable is free to
    //     take on the next value in the loop.
    imgs.push(img);
    // when this image loads, call this img.onload
    img.onload = function(){ 
      // this img loaded, increment the image counter
      imagesOK++; 
      // if we've loaded all images, call the callback
      if (imagesOK>=imageURLs.length ) {
        callback();
      }
    };
    // notify if there's an error
    img.onerror=function(){alert("image load failed");} 
    // set img properties
    img.src = imageURLs[i];
  }      
}

// All the images are now loaded
// Do drawImage & fillText
function imagesAreNowLoaded(){

  // the imgs[] array now holds fully loaded images
  // the imgs[] are in the same order as imageURLs[]

}