javascript - adjusting canvas to fit screen on scroll -

i have canvas element dynamically created overlays every other element. on resize, canvas fits screen without trouble. figured same principle work scrolling, not:

    var = document.createelement('canvas');     createcanvas();     function createcanvas(){         a.height = $(window).height();         a.width = $(window).width();         a.id = "some_canvas";         a.style.opacity = "0.8";         a.style.position = "absolute";     document.body.insertbefore(a,document.body.firstchild);      context = a.getcontext("2d");     context.fillstyle = "#000000";     context.fillrect(0, 0, a.width, a.height);    }  $(window).resize(function(){     $("some_canvas").remove();      createcanvas(); }); $(window).scroll(function(){    $("#some_canvas").remove();    createcanvas(); }); 

https://jsfiddle.net/9mfxytoz/1/

the canvas remains @ it's last size adjustment, not follow through scrolling. i'm trying make canvas can seen, when scrolling.

try this:

<canvas id="canvas2d"></canvas> 

css:

html, body {     width: 100%;     height: 100%;     margin: 0;     padding: 0; } #canvas2d {     position:absolute;     top:0;     left:0; } 

and here js required make work:

// set width , height full windows size var screen_width = window.innerwidth; // change scroll height make size of document var screen_height = document.documentelement.scrollheight;  // make sure set canvas screen height , width. canvas.width = screen_width; canvas.height = screen_height;  // everytime resize change height , width window size, , reset // center point   window.onresize = function () {     screen_height = canvas.height = document.documentelement.scrollheight;     screen_width = canvas.width = document.body.offsetwidth;         half_width = screen_width / 2;     half_height = screen_height / 2; };