How to discover why canvas.requestFullscreen() failed?

Question

Task at hand is to add support for fullscreen mode to an WebGL application written in Dart.

canvas.requestFullscreen() works for simple test cases, but fails on the full app.

Please point out the way to tell what is preventing the browser from switching to fullscreen.

The code is:

void trapFullscreenError() {
  document.onFullscreenError.listen((e) {
    log("fullscreenerror: $e");
  });
}

void toggleFullscreen(CanvasElement c) {
  log(
      "fullscreenSupport=${document.fullscreenEnabled} fullscreenElement=${document.fullscreenElement}"
      );

  if (document.fullscreenElement != null) {
    log("exiting fullscreen");
    document.exitFullscreen();
  } else {
    log("requesting fullscreen");
    c.requestFullscreen();
  }
}

In Chrome that code results in:

fullscreenSupport=true fullscreenElement=null
requesting fullscreen
fullscreenerror: Instance of 'Event' 

Dartium debugger shows these fields:

Event [id=4]
_selector null
bubbles true
cancelable false
clipboardData null
currentTarget #document [id=5]
defaultPrevented false
eventPhase 3
hashCode 234642739
path NodeList[6] [id=6]
target canvas#main_canvas [id=7]
timeStamp 1398779450832
type "webkitfullscreenerror"

Answer 1

For security reasons requestFullscreen can only be called in an event handler of a keyboard or click event.

see also Javascript request fullscreen is unreliable

Answer 2

I don't know if you're still on this. But I've managed to make it work by identifying the domElement in the renderer, inside an event

renderer.domElement.requestFullscreen()