Genişliği 0 ve alanının yüksekliği götüren bir tuval öğesi oluşturmak için çalışıyorum.

Benim örnekte de Chrome ve FireFox kaydırma çubukları eklemek, ancak ortaya çıkan, o here görebilirsiniz. Nasıl ekstra kaydırma çubuklarını önlemek ve sadece penceresinin tam genişliği ve yüksekliği tuvalin boyutunu olmasını sağlayabilir miyim?

Tuval tam ekran genişliği ve yüksekliği her zaman, tarayıcı yeniden boyutlandırıldığında bile anlam yapmak için, pencere için tuval yeniden bir işlev içinde çizmek döngü çalıştırmak gerekir.innerHeight ve pencere.innerWidth.

Örnek: http://jsfiddle.net/jaredwilli/qFuDr/

HTML

<canvas id="canvas"></canvas>

JavaScript

(function() {
    var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            /**
             * Your drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
            // do your drawing stuff here
    }
})();

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

Düzgün tarayıcı tuval tam genişlik ve yükseklik. Sadece drawStuff tuvale çizim için tüm kodu koymak zorunda() işlevi.