awestbro/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highlighting elements example</title>
</head>

<body>
    <h1>Element Highlighting Example</h1>
    <div style=" height: 2rem "></div>
    <div class="higlightmeplease" style="margin: 2rem; padding: 2rem; border: 10px solid #0000004a">
        I'm a row!
    </div>
    <div style=" height: 2rem "></div>
    <div class="higlightmeplease" style="margin: 2rem; padding: 3rem; border-top: 10px solid #0000004a; border-bottom: 20px solid #0000004a; border-left: 6px solid #0000004a; border-right: 30px solid #0000004a">
        I'm a row with different sized borders!
    </div>
    <script>

function getDocumentHeightAndWidth() {
    const body = document.body;
    const html = document.documentElement;

    const height = Math.max(body.scrollHeight, body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight);
    const width = document.body.offsetWidth;
    return { height, width };
}

function createCanvas() {
    var canvas = document.createElement('canvas'); //Create a canvas element
    //Set canvas width/height
    setCanvasWidthAndHeight(canvas);
    //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
    const context = canvas.getContext('2d');
    context.globalAlpha = 0.5;
    return { canvas, context: context };
}

function setCanvasWidthAndHeight(canvas) {
    const { height, width } = getDocumentHeightAndWidth();
    canvas.style.width = `${width}`;
    canvas.style.height = `${height}`;
    canvas.width = width;
    canvas.height = height;
}

function pxToNumber(px) {
    return parseInt(px.replace('px', ''));
}

function drawMarginBorderPadding(ctx, element) {
    const style = getComputedStyle(element);
    let { top, left, right, bottom, width, height } = element.getBoundingClientRect();
    const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight, borderBottomWidth, borderTopWidth, borderLeftWidth, borderRightWidth, display } = style;

    top = top + window.scrollY;
    left = left + window.scrollX;
    bottom = bottom + window.scrollY;
    right = right + window.scrollX;

    const numMarginTop = pxToNumber(marginTop);
    const numMarginBottom = pxToNumber(marginBottom);
    const numMarginLeft = pxToNumber(marginLeft);
    const numMarginRight = pxToNumber(marginRight);
    const numPaddingTop = pxToNumber(paddingTop);
    const numPaddingBottom = pxToNumber(paddingBottom);
    const numPaddingLeft = pxToNumber(paddingLeft);
    const numPaddingRight = pxToNumber(paddingRight);
    const numBorderTop = pxToNumber(borderTopWidth);
    const numBorderBottom = pxToNumber(borderBottomWidth);
    const numBorderLeft = pxToNumber(borderLeftWidth);
    const numBorderRight = pxToNumber(borderRightWidth);

    const marginHeight = height + numMarginBottom + numMarginTop;

    // DRAW MARGIN
    ctx.fillStyle = '#ffa50094';
    // Top margin rect
    ctx.fillRect(left, top - numMarginTop, width, numMarginTop);
    // Bottom margin rect
    ctx.fillRect(left, bottom, width, numMarginBottom);
    // Left margin rect
    ctx.fillRect(left - numMarginLeft, top - numMarginTop, numMarginLeft, marginHeight);
    // Right margin rect
    ctx.fillRect(right, top - numMarginTop, numMarginRight, marginHeight);

    const paddingWidth = width - numBorderLeft - numBorderRight;
    const paddingHeight = height - numPaddingBottom - numPaddingBottom - numBorderTop - numBorderBottom;

    // DRAW PADDING
    ctx.fillStyle = '#00800040';
    // Top padding rect
    ctx.fillRect(left + numBorderLeft, top + numBorderTop, paddingWidth, numPaddingTop);
    // Bottom padding rect
    ctx.fillRect(left + numBorderLeft, bottom - numPaddingBottom - numBorderBottom, paddingWidth, numPaddingBottom);
    // Left padding rect
    ctx.fillRect(left + numBorderLeft, top + numPaddingTop + numBorderTop, numPaddingLeft, paddingHeight);
    // Right padding rect
    ctx.fillRect(right - numPaddingRight - numBorderRight, top + numPaddingTop + numBorderTop, numPaddingRight, paddingHeight);

    const borderHeight = height - numBorderTop - numBorderBottom;

    // DRAW BORDER
    ctx.fillStyle = '#0000ff1a';
    // Top border rect
    ctx.fillRect(left, top, width, numBorderTop);
    // Bottom border rect
    ctx.fillRect(left, bottom - numBorderBottom, width, numBorderBottom);
    // Left border rect
    ctx.fillRect(left, top + numBorderTop, numBorderLeft, borderHeight);
    // Right border rect
    ctx.fillRect(right - numBorderRight, top + numBorderTop, numBorderRight, borderHeight);
}

const rowComponentSelector = ".higlightmeplease";

function findComponentsByDefinition(querySelector) {
    return document.querySelectorAll(querySelector);
}

const { canvas, context: ctx } = createCanvas();
const rows = findComponentsByDefinition(rowComponentSelector);


function drawSelectedElements(elements) {
    const { height, width } = getDocumentHeightAndWidth();
    ctx.clearRect(0, 0, width, height);
    setCanvasWidthAndHeight(canvas);
    elements.forEach((e) => {
        drawMarginBorderPadding(ctx, e);
    });
}

drawSelectedElements(rows);

window.addEventListener('resize', () => {
    drawSelectedElements(rows);
});
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Highlighting elements example</title>
	</head>

	<body>
	<h1>Element Highlighting Example</h1>
	<div style=" height: 2rem "></div>
	<div class="higlightmeplease" style="margin: 2rem; padding: 2rem; border: 10px solid #0000004a">
	I'm a row!
	</div>
	<div style=" height: 2rem "></div>
	<div class="higlightmeplease" style="margin: 2rem; padding: 3rem; border-top: 10px solid #0000004a; border-bottom: 20px solid #0000004a; border-left: 6px solid #0000004a; border-right: 30px solid #0000004a">
	I'm a row with different sized borders!
	</div>
	<script>

	function getDocumentHeightAndWidth() {
	const body = document.body;
	const html = document.documentElement;

	const height = Math.max(body.scrollHeight, body.offsetHeight,
	html.clientHeight, html.scrollHeight, html.offsetHeight);
	const width = document.body.offsetWidth;
	return { height, width };
	}

	function createCanvas() {
	var canvas = document.createElement('canvas'); //Create a canvas element
	//Set canvas width/height
	setCanvasWidthAndHeight(canvas);
	//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
	const context = canvas.getContext('2d');
	context.globalAlpha = 0.5;
	return { canvas, context: context };
	}

	function setCanvasWidthAndHeight(canvas) {
	const { height, width } = getDocumentHeightAndWidth();
	canvas.style.width = `${width}`;
	canvas.style.height = `${height}`;
	canvas.width = width;
	canvas.height = height;
	}

	function pxToNumber(px) {
	return parseInt(px.replace('px', ''));
	}

	function drawMarginBorderPadding(ctx, element) {
	const style = getComputedStyle(element);
	let { top, left, right, bottom, width, height } = element.getBoundingClientRect();
	const { marginTop, marginBottom, marginLeft, marginRight, paddingTop, paddingBottom, paddingLeft, paddingRight, borderBottomWidth, borderTopWidth, borderLeftWidth, borderRightWidth, display } = style;

	top = top + window.scrollY;
	left = left + window.scrollX;
	bottom = bottom + window.scrollY;
	right = right + window.scrollX;

	const numMarginTop = pxToNumber(marginTop);
	const numMarginBottom = pxToNumber(marginBottom);
	const numMarginLeft = pxToNumber(marginLeft);
	const numMarginRight = pxToNumber(marginRight);
	const numPaddingTop = pxToNumber(paddingTop);
	const numPaddingBottom = pxToNumber(paddingBottom);
	const numPaddingLeft = pxToNumber(paddingLeft);
	const numPaddingRight = pxToNumber(paddingRight);
	const numBorderTop = pxToNumber(borderTopWidth);
	const numBorderBottom = pxToNumber(borderBottomWidth);
	const numBorderLeft = pxToNumber(borderLeftWidth);
	const numBorderRight = pxToNumber(borderRightWidth);

	const marginHeight = height + numMarginBottom + numMarginTop;

	// DRAW MARGIN
	ctx.fillStyle = '#ffa50094';
	// Top margin rect
	ctx.fillRect(left, top - numMarginTop, width, numMarginTop);
	// Bottom margin rect
	ctx.fillRect(left, bottom, width, numMarginBottom);
	// Left margin rect
	ctx.fillRect(left - numMarginLeft, top - numMarginTop, numMarginLeft, marginHeight);
	// Right margin rect
	ctx.fillRect(right, top - numMarginTop, numMarginRight, marginHeight);

	const paddingWidth = width - numBorderLeft - numBorderRight;
	const paddingHeight = height - numPaddingBottom - numPaddingBottom - numBorderTop - numBorderBottom;

	// DRAW PADDING
	ctx.fillStyle = '#00800040';
	// Top padding rect
	ctx.fillRect(left + numBorderLeft, top + numBorderTop, paddingWidth, numPaddingTop);
	// Bottom padding rect
	ctx.fillRect(left + numBorderLeft, bottom - numPaddingBottom - numBorderBottom, paddingWidth, numPaddingBottom);
	// Left padding rect
	ctx.fillRect(left + numBorderLeft, top + numPaddingTop + numBorderTop, numPaddingLeft, paddingHeight);
	// Right padding rect
	ctx.fillRect(right - numPaddingRight - numBorderRight, top + numPaddingTop + numBorderTop, numPaddingRight, paddingHeight);

	const borderHeight = height - numBorderTop - numBorderBottom;

	// DRAW BORDER
	ctx.fillStyle = '#0000ff1a';
	// Top border rect
	ctx.fillRect(left, top, width, numBorderTop);
	// Bottom border rect
	ctx.fillRect(left, bottom - numBorderBottom, width, numBorderBottom);
	// Left border rect
	ctx.fillRect(left, top + numBorderTop, numBorderLeft, borderHeight);
	// Right border rect
	ctx.fillRect(right - numBorderRight, top + numBorderTop, numBorderRight, borderHeight);
	}

	const rowComponentSelector = ".higlightmeplease";

	function findComponentsByDefinition(querySelector) {
	return document.querySelectorAll(querySelector);
	}

	const { canvas, context: ctx } = createCanvas();
	const rows = findComponentsByDefinition(rowComponentSelector);


	function drawSelectedElements(elements) {
	const { height, width } = getDocumentHeightAndWidth();
	ctx.clearRect(0, 0, width, height);
	setCanvasWidthAndHeight(canvas);
	elements.forEach((e) => {
	drawMarginBorderPadding(ctx, e);
	});
	}

	drawSelectedElements(rows);

	window.addEventListener('resize', () => {
	drawSelectedElements(rows);
	});
	</script>
	</body>

	</html>