스크롤 할 때 캔버스 높이 재 계산

Question

Canvas가 높이를 어떻게하면 내 페이지가 어떻게 보이는지 보여주는 데모입니다. 아래로 스크롤 할 때도이 캔버스를 표시해야합니다. 지금은 첫 번째 창보기 높이를 계산합니다. 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