Search code examples
javascriptanimationcanvasmobiletablet

canvas animation stops playing when click homebutton (switch apps) on mobile device

I have problem with my canvas animation on my mobile device / tablet. Animation runs well until I click on "home" or "switchapp" button and then change the device "rotation". When I switch back to browser window with canvas animation, it is freezed and it won't play again.

Here is a fiddle: jsfiddle.net/nLmjchqv/

Is it possible to run animation again (like restart canvas)? Is it possible to detect apps switch or home button click in JavaScript?

Thank you.

Solution

  • You can listen for the pageshow and pagehide Events (see MDN)

    For example you can call cancelAnimationFrame on pagehide and then start the animation again with requestAnimationFrame on pageshow