Responsive canvas effect

Question

I have a responsive web page where I have a light effect using the canvas. It turns out that the effect should remain only on the banner area, I did here a method using the negative margin-top, but the result was not good, and the effect often exceeds the lower limit of the banner. I would like to know if there is another better solution to be implemented, follow my example.

HTML

    <nav class="navbar navbar-default navbar-fixed-top">
        <div>
            <div>
                <button type="button" class="navbar-toggle" data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                </button>
                <a>
                    <img src="image/logo.png"  alt="logo">
                </a>
            </div>
            <div>
                <ul>
                    <li><a>1</a></li>
                    <li><a>2</a></li>
                    <li><a>3</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <header id="banner_area">            
        <h1>Title</h1>
        <h3>Sub-title</h3>
        <div>
            <a href="#section"></a>
        </div>
        <canvas id="canvas"></canvas>
    </header>

    <section id="section">...</section>

CSS

#banner_area{position:relative;}
#canvas{left: 0;}
@media (min-width: 320px) {#canvax {margin-top: -45%;}}
@media (min-width: 480px) {#canvax {margin-top: -38%;}}
@media (min-width: 720px) {#canvax {margin-top: -32%;}}
@media (min-width: 1280px) {#canvax {margin-top: -27%;}}
@media (min-width: 1920px) {#canvax {margin-top: -23%;}}

Page overview