Forums » Help » Canvas losing focus?

Working on a game and I have a button that unhides a div containing a flowplayer video player. Within that div, there's another button that closes the video, and hides the div. This works fine, but it causes the canvas to lose focus and then I have to click to get back focus - so a user has to click an underlying button two times to make it work, after watching the video. I've determined it's not just the video per se - simply showing a hidden div containing solid black, and hiding it 5 seconds later causes the focus loss.
Anyone come across this and please tell me how to fix. This is a showstopper at the moment.

Still working on this but have found that I don't think canvas is losing focus - it seems to be Impact that's losing focus. I stuck a mousedown in the canvas tag like so:

<canvas id="canvas" onmousedown="down(event)">

and then in the down(e) function I did a console.log('canvas down');

I get the canvas down trace, after closing the video - even when the impact button doesn't respond...

So, anything I can do?

OK... so, Impact isn't really losing focus as my rollovers based on mouse position are still working... however it takes two mouse clicks to affect a button still.

Anyone have any ideas here? I need to get this taken care of asap.

If someone cares to have a look it's here right now:

http://design.gmrstage.com/dave/chiltest/default.html#

Click arrow to get to main menu - then click any of the three main areas... video will open. Click menu to close video... buttons now need to be clicked twice to work.

As a little test I did a ig.system.setGame(newGameClass); in the callback from closing the video.
New level loads in fine - but the canvas still needs to be clicked before it will work. Has to be the canvas too - clicking outside it doesn't do the trick.

In main.js init put this line:

// Chrome-specific fix that allows canvas to be focused on.
$("#canvas").attr("tabindex", "0");

Where ever the canvas needs focus, use this line:

$('#canvas').focus();

This solution assumes you are using jQuery.

That doesn't work, I've already tried it. The canvas isn't actually losing focus... if you look at the link I provided, you will see that after the video closes and you click a button - you will see 'canvas down' written to the console... but the button in Impact will not register until the second click.

quick fix : track the onmouseout event of your div, and have the event handler focus the canvas.
OR, handle the left click event at the window level (Impact does it at the canvas level), and re-dispatch it on the canvas in case mouse is on the canvas and outside the div. That way ig.Input will listen to it.

(to know wether you're on the movie div or not, either track it with a boolean and mouseenter/mouseout; OR use getBoundingClientRect (cache the result !) and test the mouse coordinates)

Thanks vincentpiel, your second solutions sounds like it could work. I'm just not certain how to implement it. I don't think the first one would work - since the canvas is not actually losing focus from what I can tell. Going to see if I can figure out dispatching mouse back to the canvas...

@vincentpiel, I tried placing an onmouseout on the gameContainer div, and when the video opens, I get the event - saying the mouse is out of the div. But using focus() doesn't do a thing. Tried setting it the container div, and the canvas and either way I need to click twice when the video closes.

Well, my first attempt failed. I get a 'too much recursion' error... Here's what I did:

window.onclick = function(e){

    console.log('window clicked');	 

    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent( 'click', true, false );
    document.getElementById('canvas').dispatchEvent(evObj);

}

One more thing - capturing and redispatching to canvas doesn't seem like it will work either - canvas has the focus... Hence I get canvas down traced to the console when I click a button - even though Impact doesn't register it.

So manually dispatching shouldn't do any better. If, as you say, Impact listens to events on the canvas, and canvas is responding... then Impact seems to have stopped listening.

Right?

I think i got it : ig.input has its own mechanism to store wether the mouse is up or down. Now if it miss an even (in this case, the mouseup event), it will cary on thinking the mouse is down. Hence not notify next time it goes down. It has to do with the div listening to an event an stopping propagation/cancelling the event i guess.
So quick fix : when in your game, show the video on mouse UP (released).
Leave the video window on mouse up also.

(The hard way would be to understand fully the event path and redispatch, cancel...)

(for your attempt : you should have been using mousedown / mouseup events, not click, but whatever if listening to mouse up is working. )

>>So quick fix : when in your game, show the video on mouse UP (released).
Leave the video window on mouse up also.<<

Yes! Thanks so much, that finally did the trick!