在整个页面上覆盖画布（不仅仅是窗口）

Question

Background

We are presenting some lessons in a long page format, with each section being the full height of the window... there many different sections in each lesson.

What I am trying to do I want people to be able to scribble all over the page. As you can see there are some options for highlighting and erasing canvas content.

The goal here is to get a canvas to cover the entire page so that users can draw everywhere.

What I've Tried

I have added position:absolute to my canvas ( #theCanvas ) and that put the canvas on top of my content but when I scroll down I cant draw on anything under the initial window viewport.

My Code

Markup

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

My Question

How can I get the canvas to span the entire page not just the window.

Answer 1

Use this CSS for the canvas:

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

elements with a fixed position stay in the same position, given with the top/right/bottom/left-value relative to the viewport, so it keeps being spread across the whole page even when you scroll.

Answer 2

Try adding this css:

html {
    height:100%;
}

body { 
     min-height:100%;
     position: relative;
}

#theCanvas {
     min-height:100%;
}