在html元素之间绘制一个矩形

Question

我正试图通过javascript在2

标签之间绘制一个矩形，但我没有任何成就。我想要做的事情是这样的：

Screenshot

我试图通过给出X，Y绘制一个矩形，但是当页面大小改变时，大小会改变：

var x = 100;
var y = 111;
var width = 200;
var height = 40


var canvas = document.createElement('canvas'); //Create a canvas element
//Set canvas width/height
canvas.style.width = '100%';
canvas.style.height = '100%';
//Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Position canvas
canvas.style.position = 'absolute';
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.zIndex = 100000;
canvas.style.pointerEvents = 'none'; //Make sure you can click 'through' the canvas
document.body.appendChild(canvas); //Append canvas to body element
var context = canvas.getContext('2d');
//Draw rectangle
context.rect(x, y, width, height);
context.fillStyle = 'yellow';
context.fill();

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: el.left + window.scrollX,
    top: el.top + window.scrollY
  }
}