JSFiddle - React, Tailwind, and code Playground

by Joshua Salwen

HTML

<canvas id="overlay" class="canvas"></canvas>
<canvas id="draw" class="canvas"></canvas>

CSS

.canvas {
  border: 1px solid #000;
  position: absolute;
}
#overlay {
  width: 80%;
  height: 80%;
  background-color: red;
}
#draw {
  width: 60%;
  height: 60%;
  padding: 0%;
  background-color: blue;
}

JavaScript

function getOverlaySize(overlayBrowserSize, drawBrowserSize, drawCanvasSize = { w: 1600, h: 900 }) {
	const w = drawCanvasSize.w * overlayBrowserSize.w / drawBrowserSize.w;
  const h = drawCanvasSize.h * overlayBrowserSize.h / drawBrowserSize.h;
  
  return {
  	w,
    h,
    offsetX: (w - drawCanvasSize.w) / 2,
    offsetY: (h - drawCanvasSize.h) / 2
  };
}

function relativeCoordinates (coor, overlayCanvasSize, drawCanvasSize = { w: 1600, h: 900 })
{
	var offsetX = overlayCanvasSize.offsetX ?? 0;
	var offsetY = overlayCanvasSize.offsetY ?? 0;
	return {
  	x: (overlayCanvasSize.w / drawCanvasSize.w * coor.x) - offsetX,
    y: (overlayCanvasSize.h / drawCanvasSize.h * coor.y) - offsetY
  };
}

var drawCanvasSize = { w: 1600, h: 900 };

var overlayBrowserSize = { w: 905, h: 509.0625};
var drawBrowserSize = { w: 814.5, h: 458.15625 };

// get the relative overlay size and offsets
var overlaySize = getOverlaySize(overlayBrowserSize, drawBrowserSize, drawCanvasSize);
console.log('overlaysize', `w: ${overlaySize.w}, h: ${overlaySize.h}`);
console.log('offsets', `x: ${overlaySize.offsetX}, y: ${overlaySize.offsetY}`);

// get the x, y for the draw canvas for the overlay canvas coordinates
var coor1 = relativeCoordinates({ x: 0, y: 0 }, overlaySize, drawCanvasSize);
console.log('0, 0', `${coor1.x}, ${coor1.y}`);
var coor2 = relativeCoordinates({ x: 1214, y: 875 }, overlaySize, drawCanvasSize);
console.log('1214, 875', `${coor2.x}, ${coor2.y}`);