Высота холста, пересчитываемая при прокрутке

Question

Быстрая демонстрация, показывающая, как выглядит моя страница с холстом, который тормозит высоту. Мне нужно сделать этот холст даже при прокрутке вниз. В настоящий момент он вычисляет высоту для первого окна. demo:

(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; 


      //canvas is showing on my demo in Fiddle 

      /** 
      * 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 
    } 
})(); 

любое предложение будет оценено.

Answer 1

Вы можете исправить это, добавив position: fixed; к вашему элементу холста.

CSS

canvas { 
    position:fixed; 
    z-index:1; 
} 

jsfiddle