オーバーレイキャンバス（だけでなく、ウィンドウ）

Question

背景

レッスン。私は をやろうとしています何

私は、人々は、すべてのページの上に落書きできるようにしたいです。表示されているように、キャンバスのコンテンツを強調表示して消去するオプションがあります。

ここでの目標は、ユーザーがどこにでも描画できるようにページ全体をカバーするキャンバスを得ることです。私は私のキャンバス（#theCanvas）にposition:absoluteを追加した、それは私のコンテンツの上にキャンバスを置くが、私はスクロールダウンしたときに、私は最初のウィンドウのビューポートの下に何も上に描画カント

を試してみた何

。

マイコード

マークアップ

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

<div class="right-menu"> 

    <div class="right-menu-section"> 
     <div class="right-menu-section-circle"> 
      <svg height="32" width="32"> 
       <circle cx="16" cy="16" r="16" fill="#eeeeee"> 
      </svg> 
     </div> 
     <div class="right-menu-section-circle"> 
      <svg height="16" width="16"> 
       <circle cx="8" cy="8" r="8" fill="#eeeeee"> 
      </svg> 
     </div> 
     <div class="right-menu-section-circle"> 
      <svg height="8" width="8"> 
       <circle cx="4" cy="4" r="4" fill="#eeeeee"> 
      </svg> 
     </div> 
    </div> 

    <div class="right-menu-section"> 
     <div class="right-menu-section-icon"> 
      <i class="fa fa-eraser" aria-hidden="true"></i> 
     </div> 
     <div class="right-menu-section-icon"> 
      <i class="fa fa-pencil" aria-hidden="true"></i> 
     </div> 
     <div class="right-menu-section-icon"> 
      <i class="fa fa-hand-pointer-o" aria-hidden="true"></i> 
     </div> 
    </div> 

    <div class="right-menu-section"> 
     <div id="colors"></div> 
    </div> 

    <div class="right-menu-section"> 
     <div class="right-menu-section-icon"> 
      <i class="fa fa-hand-paper-o" aria-hidden="true"></i> 
     </div> 
    </div> 

</div> 

<div class="" style="display:block;position:absolute;float:right;margin-left:40px;margin-top:20px"> 
    <h4>Estimated Time to complete:<h4> 
    <h2> 
     <i class="fa fa-clock-o"></i> 
     25m 
    </h2> 
</div> 

<!-- intro --> 
<div class="container-fluid card" style="background:#e8e6e1"> 
    <div class="container card-content"> 
     <h1 class="text-center">Welcome...</h1> 
     <h4 class="text-center"> 
      Today's Lesson Focus: 
      <?php echo $focus->lesson_focus; ?> 
     </h4> 
     <p class="text-center"><b>Details:</b> <?php echo $focus->details; ?></p> 
    </div> 
</div> 
<!-- end intro --> 

<!-- lesson --> 
<?php foreach ($cards as $card) : ?> 
<div class="container-fluid card" style="background:#eaeaec"> 
    <div class="container card-content"> 
     <div class="col-md-6"> 
      <h2> 
       <?php echo $card->card_title; ?> 
       <i class="fa fa-volume-up"></i> 
      </h2> 
      <p><?php echo $card->card_content; ?></p> 
     </div> 
     <div class="col-md-6"> 
      <img src="<?php echo $card->card_file_path; ?>" alt=""> 
     </div> 
    </div> 
</div> 
<?php endforeach; ?> 
<!-- end lesson --> 

<!-- outtro --> 
<div class="container-fluid card" style="background:#E7E1E8"> 
    <h1 class="text-center">Thanks!</h1> 
</div> 
<!-- end outtro --> 

CSS

.card { 
     height: 100vh; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     margin-right:50px; 
    } 

    .card-content { 

    } 

    .card-content img { 
     width:100% !important; 
     -webkit-box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75); 
     -moz-box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75); 
     box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75); 
     border-radius: 20px; 
    } 

    .right-menu { 
     position:fixed; 
     float:right; 
     height:100vh; 
     right: 0; 
     top: 0; 
     width:50px; 
     background:#222222; 
     -webkit-box-shadow: -4px 0px 10px 0px rgba(153,153,153,1); 
     -moz-box-shadow: -4px 0px 10px 0px rgba(153,153,153,1); 
     box-shadow: -4px 0px 10px 0px rgba(153,153,153,1); 
     border-top:1px solid #444444; 
    } 

    .right-menu-section { 
     border-top:1px solid #444444; 
     padding-top:20px; 
     padding-bottom:20px; 
    } 

    .right-menu-section-icon { 
     color: #eeeeee; 
     margin-top:10px; 
     font-size:24px; 
     display:block; 
     text-align:center; 
    } 

    .right-menu-section-circle { 
     color: #eeeeee; 
     margin-top:10px; 
     display:block; 
     text-align:center; 
    } 

    .swatch { 
     width:30px; 
     height:30px; 
     border-radius:15px; 
     box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5); 
     display: block; 
     margin-top: 10px; 
     margin-left:10px; 
    } 

    #theCanvas { 
     position: absolute; 
    } 

私の質問

私はjはページ全体ではなくまたがるようにキャンバスを取得できますかust the window。

Answer 1

使用キャンバスは、このCSS：同じ位置に固定された位置ステーと

#theCanvas{ 
    position:fixed; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
} 

要素、それはされ続けるように、ビューポートの上部/右/下/左相対値で与えられスクロールしてもページ全体に広がります。

Answer 2

このCSSを追加してみてください：

html { 
    height:100%; 
} 

body { 
    min-height:100%; 
} 

#theCanvas { 
    min-height:100%; 
}