Canvas toggle filling whole page removing scrollbar

Question

I've got a canvas on my page and want to toggle it filling the page and backwards. My page is usually "higher" then a screens height so there is a scrollbar on my page. This scroll-bar does't hide when I'm setting the size of my canvas like that in my css:

canvas {
    display: inline;
    outline: 0;
    margin: 50;
    border: 1px solid #E0E0E0;
}

canvas.fullscreen {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    margin: 0;
}

My javascript looks like this:

//toggle the fullscreen mode
function fullscreen() {
    if (!fullWindowState) {
        fullWindowState = true;
        //canvas goes full Window
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.className = "fullscreen"
    } else {
        fullWindowState = false;
        //canvas goes normal
        canvas.width = 820;
        canvas.height = 600;
        canvas.className = "";
    }
}

The full code is on github too and the page is on gh-pages http://patsimm.github.io/mandelight/

I really don't know what to do to remove the scrollbar when the canvas is in "fullscreen" mode. Every help is apreciated!

Thanks! patsimm

Answer 1

This has something to do width <canvas> tag.

<canvas> will cause scrollbar if not set to display:block.

detail: http://colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen