PrudiiArca PrudiiArca - 4 months ago 43
Dart Question

Fullscreen and retrieving property by name in Dart

I'm working on making a HTML5 canvas fullscreen using Dart. Sadly every browser has another prefixed version of the Fullscreen API and Dart doesn't keep track of it. Thus most of the time the methods provided by Dart don't work.
I found this "hack" to get going into fullscreen working perfectly fine:

JsObject canvasElement = new JsObject.fromBrowserObject(_canvas);

List<String> methods = ["requestFullscreen", "mozRequestFullScreen", "webkitRequestFullscreen", "msRequestFullscreen"];
for(String method in methods){
_canvas.width = window.screen.width;
_canvas.height = window.screen.height;

My problem is the following:
When pressing "Escape" or "F11" the fullscreen will be closed, but the canvas will not resize back to normal size. I tried to manually override the KeyDown event for this keys, but it seems that my browser (Google Chrome / Dartium) does not recognize the event in this special case...

Obviously I need to know, whether the browser is in fullscreen mode or not to resize the canvas accordingly. Is there a way to retrieve the javascript properties
document.fullscreenElement, document.webkitFullscreenElement, document.msFullscreenElement
as supposed in the Fullscreen API docs in a similiar way like I could access the methods
document.requestFullscreen, document.webkitRequestFullscreen etc.

Thank you very much for your help...


Well I got it to work now. I am going to write an answer here, hence people having a similiar problem may find a solution:

You can access most of the vendor specific methods of the fullscreen API in dart like described in this answer. Moreover there is indeed a way to access properties if they exist as you can see in the lowest method of the code provided in the answer mentioned above...

I was right about the browser not throwing a keydown event, when pressing F11 or Esc to toggle fullscreen mode. I learned that this can be prevented by calling event.preventDefault() and then toggling fullscreen manually. The full sourcecode of my fullscreen management looks like this:

void init(){

    // initiate variables needed for fullscreen management
    _fullscreenTimer = new;
    _fullscreen = false;

    // setup event handler, thus pressing F11 toggles fullscreen
    window.onKeyDown.listen((KeyEvent e) {
        if (e.keyCode == KeyCode.F11) {
        // prevent going fullscreen without noticing

        // get current time
        int now = new;

        // only toggle fullscreen when last toggle was at least 500ms before
        if ((now - _fullscreenTimer) >= 500) {
            // toggle fullscreen
            if (!_fullscreen) {
            } else {

            // reset timer to current time
            _fullscreenTimer = now;

void resize() {
    // the element currently in fullscreen mode
    var fullscreenElement = _getFullscreenElement();

    // check whether there was a change to or from fullscreen
    if (!_fullscreen && fullscreenElement != null) {
        _fullscreen = true;

        _canvas.width = window.screen.width;
        _canvas.height = window.screen.height;
    } else if (_fullscreen && fullscreenElement == null) {
        _fullscreen = false;

        _canvas.width = _originalWidth;
        _canvas.height = _originalHeight;

/// requests fullscreen by calling the corresponding methods of each vendor
void _requestFullscreen() {
    _callMethods(_canvas, ['requestFullscreen', 'webkitRequestFullscreen', 'mozRequestFullScreen', 'msRequestFullscreen', 'oRequestFullscreen']);

/// exits fullscreen by calling the corresponding methods of each vendor
void _exitFullscreen() {
    _callMethods(document, ['exitFullscreen', 'webkitExitFullscreen', 'mozCancelFullScreen', 'msExitFullscreen', 'oExitFullscreen']);

/// checks whether fullscreen is active by getting the corresponding property of each vendor
dynamic _getFullscreenElement() {
    return _getProperty(document, ['fullscreenElement', 'webkitFullscreenElement', 'mozFullScreenElement', 'msFullscreenElement', 'oFullscreenElement']);

/// calls the first matching method of a browser object
dynamic _callMethods(dynamic browserObject, List<String> methods) {
    JsObject js = new JsObject.fromBrowserObject(browserObject);

    for (String method in methods) {
      if (js.hasProperty(method)) {
        return js.callMethod(method);

    return null;

/// retrieves the first matching property of a browser object
dynamic _getProperty(dynamic browserObject, List<String> properties) {
    JsObject js = new JsObject.fromBrowserObject(browserObject);

    for (String property in properties) {
        if (js.hasProperty(property)) {
            return js[property];

    return null;