Offset Canvas Test Alt

index.html

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>

  <div class="box3"></div>

  <!-- <canvas></canvas> -->

  <button class="btn">help</button>
</div>

offset-canvas-test-alt.markdown

Offset Canvas Test Alt

A Pen by Matt on CodePen.

License.

script.js

var createCanvas = function() {
  var $windowOuterWidth = $(window).outerWidth();
  var $windowOuterHeight = $(window).outerHeight();
  var $topFill = null;
  var $bottomFill = null;
  var $leftFill = null;
  var $rightFill = null;

  var b2 = $(".box2");
  var b2offset = b2.offset();

  function createTopOverlay(element, offset) {
    var height = offset.top;
    
    var elem = $('<div />', {
      "class": 'topOverlay',
      "height": height
    })
    $('body').append(elem);

  }

  function createBottomOverlay(element, offset) {
    var box = $('.box');
    var boxHeight = box.outerHeight();
    var elemHeight = element.outerHeight();
    var top = offset.top + elemHeight + "px";
    var height = (boxHeight - offset.top - elemHeight) + "px";

    var elem = $('<div />', {
      "class": 'bottomOverlay',
      height: height
    })
    elem.css("top", top);
    $('body').append(elem);

  }

  function createLeftOverlay(element, offset) {
    var left = offset.left + "px";
    var height = element.outerHeight() + "px";
    var boxWidth = element.outerWidth();
    var width = offset.left;
    console.log(offset.left);

    var top = offset.top;

    var elem = $('<div />', {
      "class": 'leftOverlay',
      height: height,
      width: width
    });
    elem.css("top", top)
    $('body').append(elem)
  }

  function createRightOverlay(element, offset) {
    var boxWidth = element.outerWidth();
    var leftStart = offset.left + boxWidth;
    var leftStartPx = leftStart + "px"
    var height = element.outerHeight() + "px";
    var containerWidth = $('.box').outerWidth();

    var width = (containerWidth - boxWidth - offset.left);
    var top = offset.top
      
    var elem = $('<div />', {
      "class": 'rightOverlay',
      height: height,
      width: width
    });
    elem.css("left", leftStartPx)
    elem.css("top", top)
    $('body').append(elem)
  }

  createTopOverlay(b2, b2offset);
  createBottomOverlay(b2, b2offset);
  createLeftOverlay(b2, b2offset);
  createRightOverlay(b2, b2offset);
}

$('.btn').on('click', createCanvas)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>

style.css

body {
  margin: 0 !important;
}

.box {
  height: 100vh;
}
.box1, .box3
{
/*   width: 300px; */
  height: 50px;
/*   border: 1px solid blue; */
  background: yellow;
  margin: auto;
  position: relative;
  z-index: 11;
}

.box3 { 
  height: 100px !important;   
}
.box2 {
  width: 300px;
  height: 50px;
/*   border: 1px solid purple; */
  background: pink;
  margin: 5px auto;
  position: relative;
  z-index: 11;
  
}


/* .box2 {
  position: absolute;
  border: 1px solid red;
  z-index: 10;
} */

.btn {
  margin-top: 40px;
  height: 100px;
  width: 100px;
}

canvas {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.topOverlay,
.bottomOverlay
.rightOverlay,
.leftOverlay {
  z-index: 1000;
  position: absolute;
  background: rgba(0,0,0, .5);
}
.topOverlay {
  z-index: 1000;
  position: absolute;
  background: rgba(0,0,0, .5);
  width: 100%;
  top: 0;
  left: 0;
}

.bottomOverlay {
  z-index: 1000;
  position: absolute;
  background: rgba(0,0,0, .5);
  width: 100%;
  left: 0;
/*   border: 1px solid red; */
}

.leftOverlay {
  left: 0;
/*   height: 100%; */
  z-index: 1000;
  position: absolute;
  background: rgba(0,0,0, .5);
}

.rightOverlay {

/*   height: 100%; */
  z-index: 1000;
  position: absolute;
  background: rgba(0,0,0, .5);
}