How to get canvas in fullscreen-mode with KineticJS

问题

I'm using KineticJS-Library to work with my canvas-Element.

I need one big canvas-Element with a size of 1920x1080px, nothing else is displayed on my site.

If the browser's resolution is not high enough, I want to scale down the whole canvas-Element: The aspect ratio always has to stay at 16:9, and the size of the element should be as big as possible (black borders, if the browser's ratio is different).

However, the coordinate-space has to stay at 1920x1080 - I don't want to calculate with coordinates.

Is there a way I can achieve this?

回答1:

After experimenting with the scale-Property, I finally found a simpler solution, where I only have to modify css-properties.

The answer is very simple, although it's very long.

This is my html-body:

<body onload='init()'>
    <div id="canvasWrapper"></div>
</body>

And this is my css:

*{
    padding: 0;
    margin: 0;
    border: 0;
}

body{
    overflow: hidden;
}

#canvasWrapper {
    background-color: red;
    display: inline-block;
}

The important parts are the "inline-block" of my canvas-wrapper, and the "overflow: hidden" of the body-element. It seems that there are some pixels below the canvas, which would make both scrollbars appear.

After some experimenting, I got the following js-code:

function init(){    
    resizeCanvas();         //resize the canvas-Element
    window.onresize = function()  { resizeCanvas(); }
}

Whenever the screen-size changes, my "resize"-Function will be called.

The whole trick is done in this resize-Function:

function resizeCanvas() {
    var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    var ratio = x/y;            //browser-ratio
    var should = 1920/1080;     //needed ratio

    var cv = document.getElementsByTagName("canvas")[0];
    var cc = document.getElementsByClassName("kineticjs-content")[0];

    var cx,cy;                  //The size of the canvas-Element
    var cleft=0;                //Offset to the left border (to center the canvas-element, if there are borders on the left&right)
    if(ratio > should){         //x-diff > y-diff   ==> black borders left&right
        cx = (y*1920/1080);
        cy = y;
        cleft = (x-cx)/2;
    }else{                      //y-diff > x-diff   ==> black borders top&bottom
        cx = x;
        cy = (x*1080/1920);
        cv.setAttribute("style", "width:"+x+"px;height:"+(x*1080/1920)+"px;");
    }

    cc.setAttribute("style", "width:"+x+"px;height:"+y+"px;");                                          //canvas-content = fullscreen
    cv.setAttribute("style", "width:"+cx+"px;height:"+cy+"px;position: relative; left:"+cleft+"px");    //canvas: 16:9, as big as possible, horizintally centered
}

This function calculates the window-width, and the biggest canvas-size that is possible without changing the ratio.

After that, I set the auto-generated "kineticjs-content"-div to fullscreen-size, and the size of the canvas-Element to the previously calculated size.

Everything works without the need of changing canvas-content and redrawing anything.

It's cross-browser compatible (tested on Firefox 25, Chrome 31 and Internet Explorer 11)

回答2:

I found another Method which is much easier to implement - there's a built-in Fullscreen-Function for canvas-Elements, that sets the whole canvas in Fullscreen-Mode, and that shows black borders if needed.

http://www.sitepoint.com/html5-full-screen-api/

I added this function-call to the ondblclick-Event of the Ajax-Element: Each time the user double clicks the element, it enables or disables Fullscreen-Mode.

Note that you can't call this function in your javascript-Code: The Browsers only allow fullscreen, if the Event was triggered by the User.

It works in Firefox and Chrome, but it doesn't work in IE. I haven't tested other browsers.

I currently have a combination of this method and my first answer, and it works just perfect.

来源：https://stackoverflow.com/questions/19964591/how-to-get-canvas-in-fullscreen-mode-with-kineticjs

标签

kineticjs