On Click On Loaded Image

[glenelkins]

Hi

In the following code i load an image of a bird onto a canvas and make it bounce around.

 

How can i allow this bird object to be clickable so it fires an onclick event? I tried adding bird.onclick = function()  inside and outside the onload handler and it does nothing!

 

$(document).ready ( function() {
                
                // global vars
                var canvas = null;
                var birdX = 0;
                var birdY = 0;
                var posX = 2;
                var posY = 4;
                 
                /*
                 function: drawBird
                 desc: draws an animated bird
                */
                $.drawBird = function() {
                     
                     // create bird image object
                    var bird = new Image();
                    
                    // create onload event handler to make sure the bird
                    // image loads - prevents crashing or halting
                    // - this is only called once the bird src is set
                    bird.onload = function() {
                          
                    
                        // clear the canvas
                        // otherwise the bird will get repeated as a trail!
                        canvas.clearRect( 0,0,1024,768 );
                        
                        // draw the bird on our canvas
                        canvas.drawImage ( bird, birdX, birdY );
                        
                        if ( birdX + posX > 1024 || birdX + posX < 0 ) {
                            
                            posX = -posX;
                            
                        } 
                        
                        if ( birdY + posY > 768 || birdY + posY < 0 ) {
                            
                            posY = -posY;
                        }
                        
                        birdX += posX;
                        birdY += posY;
                        
                        $('#pos').html ( 'X:' + birdX + 'Y:' + birdY );
                       
                        
                    }
                  
                    // load the actual bird image
                    bird.src = "bird.png";
                    
                   
                }
                
                /*
                    function: init
                    desc: initialise the canvas and interval for bird movement
                */
                $.init = function() {
                    
                    // get reference to the canvas element
                    canvas = $('#canvas')[0].getContext ( '2d' );
                    
                    // set interval to the drawBird function as 10 milliseconds
                    return setInterval ( $.drawBird, 10 );
                    
                }
                
               
                
                
                // initialise
                $.init();
            
                
            });

[XeNoMoRpH1030]

If I had to guess, the "bird" variable is not in the same scope (not accessible) when you are trying to do bird.onclick = function();

 

I'm not sure what library you are using, but if you set the bird variable before all of that (e.g. var bird; ) making it a true global variable and then when creating the image you ditch var, maybe that could work.

 

Is there a reason you are creating a new image 10 milliseconds though? Maybe that wasn't the intent, but if it calls the $.drawBird function every 10 milliseconds, it creates a new image.

[glenelkins]

Hi

 

Here is the updated code. Here you can see the bird is re-drawn by clearing the rectangle, so that it animates the bird moving.

 

The issue i have now is when the bird is cleared it also clears anything else in the scene where the bird currently is. So if you see $.renderScene() draws 3 trees...how can I re-draw the bird without it effecting the trees? Because I have to keep re-drawing the trees as well so it looks like the bird flickers when it flies near them...not sure how to stop this?

 

$(document).ready ( function() {
                
                // global vars
                var trees = new Array();
                var canvas = null;
                var bird = null;
                var birdX = 0;
                var birdY = 0;
                var posX = 2;
                var posY = 4;
                
                
                /*
                 function: renderScene
                 desc: renders the trees and any other objects onto the canvas - clears the canvas first
                            to avoid animation render repeating
                */
                $.renderScene = function() {
            
                    
                             // draw 3 trees
                    trees[0] = new Image();
                    trees[1] = new Image();
                    trees[2] = new Image();
                    
                    trees[0].onload = function() {
                        
                        canvas.drawImage ( trees[0], 0, 0 );
                    }
                    trees[1].onload = function() {
                        
                        canvas.drawImage ( trees[1], 700, 10);
                    }
                    trees[2].onload = function() {
                        
                        canvas.drawImage ( trees[2], 350, 100);
                    }
                    trees[0].src = 'tree.png';
                    trees[1].src = 'tree.png';
                    trees[2].src = 'tree.png';
                    
                    
                }
                
                /*
                 function: drawBird
                 desc: draws an animated bird
                */
                $.drawBird = function() {
                     
                     // create bird image object
                    bird = new Image();
                    
                    // create onload event handler to make sure the bird
                    // image loads - prevents crashing or halting
                    // - this is only called once the bird src is set
                    bird.onload = function() {
                        
                        // clear the canvas
                        canvas.clearRect( birdX - 10, birdY - 10, 90,90 );
                       
                        // draw the bird on our canvas
                        canvas.drawImage ( bird, birdX, birdY );
                        
                        if ( birdX + posX > 1024 || birdX + posX < 0 ) {
                            
                            posX = -posX;
                            
                        } 
                        
                        if ( birdY + posY > 768 || birdY + posY < 0 ) {
                            
                            posY = -posY;
                        }
                        
                        birdX += posX;
                        birdY += posY;
                        
                        $('#pos').html ( 'X:' + birdX + 'Y:' + birdY );
                       
                        
                    }
     
                    // load the actual bird image
                    bird.src = "bird.png";

                    // Render the trees on top of the bird so the bird goes
                    // behind
                    $.renderScene();
                    
                   
                }
                
                /*
                    function: init
                    desc: initialise the canvas and interval for bird movement
                */
                $.init = function() {
                    
                    // get reference to the canvas element
                    canvas = $('#canvas')[0].getContext ( '2d' );
                
                
                    // set interval to the drawBird function as 10 milliseconds
                    return setInterval ( $.drawBird, 10 );
                    
                }
                
         
                
                
                // initialise
                $.init();
            
                
            });