diff --git a/inventory/templates/testing.html b/inventory/templates/testing.html
index 5581c2f..c5107af 100644
--- a/inventory/templates/testing.html
+++ b/inventory/templates/testing.html
@@ -177,7 +177,7 @@
         </span>
         <div id="coords"
             class="border border-black position-absolute d-none bg-warning-subtle px-1 py-0 user-select-none"></div>
-        <canvas id="overlay" class="w-100 h-100"></canvas>
+        <canvas id="overlay" class="position-absolute w-100 h-100"></canvas>
     </div>
 </div>
 {% endblock %}
@@ -216,6 +216,10 @@ window.addEventListener('resize', resizeAndSetupCanvas);
 
 setGrid();
 
+function pxToGrid(v) {
+    return v / {{ grid_size }};
+}
+
 function axisMode(type, axis) {
     if (type === 'fullGrid') return 'grid';
     if (type === 'verticalGrid') return axis === 'x' ? 'grid' : 'px';
@@ -300,24 +304,17 @@ function normRange(a1, a2, mode, grid) {
 }
 
 function normalizeRect(shape) {
-    const grid = {{ grid_size }};
-    const type = getActiveType();
-
-    const modeX = axisMode(type, 'x');
-    const modeY = axisMode(type, 'y');
-
-    const xr = normRange(shape.x1, shape.x2, modeX, grid);
-    const yr = normRange(shape.y1, shape.y2, modeY, grid);
-
-    const x = (modeX === 'grid') ? xr.start : xr.start;
-    const w = (modeX === 'grid') ? xr.size : xr.size;
-    const y = (modeX === 'grid') ? yr.start : yr.start;
-    const h = (modeX === 'grid') ? yr.size : yr.size;
+    const x1 = pxToGrid(shape.x1);
+    const y1 = pxToGrid(shape.y1);
+    const x2 = pxToGrid(shape.x2);
+    const y2 = pxToGrid(shape.y2);
 
     return {
         type: 'rect',
-        modeX, modeY,
-        x, y, w, h,
+        x: Math.min(x1, x2),
+        y: Math.min(y1, y2),
+        w: Math.abs(x2 - x1),
+        h: Math.abs(y2 - y1),
         color: shape.color,
         fill: shape.fill
     };
@@ -329,23 +326,12 @@ function normalizeEllipse(shape) {
 }
 
 function normalizeLine(shape) {
-    const grid = {{ grid_size }};
-    const type = getActiveType();
-
-    const modeX = axisMode(type, 'x');
-    const modeY = axisMode(type, 'y');
-
-    function normPoint(v, mode) {
-        return mode === 'grid' ? (v / grid) : v;
-    }
-
     return {
         type: 'line',
-        modeX, modeY,
-        x1: normPoint(shape.x1, modeX),
-        y1: normPoint(shape.y1, modeY),
-        x2: normPoint(shape.x2, modeX),
-        y2: normPoint(shape.y2, modeY),
+        x1: pxToGrid(shape.x1),
+        y1: pxToGrid(shape.y1),
+        x2: pxToGrid(shape.x2),
+        y2: pxToGrid(shape.y2),
         color: shape.color
     };
 }
@@ -379,21 +365,16 @@ function redrawAll() {
 function drawShape(shape) {
     if (!ctx) return;
 
-    const grid = {{ grid_size }};
-    const modeX = shape.modeX || 'grid';
-    const modeY = shape.modeY || 'grid';
-
-    const toPxX = (v) => modeX === 'grid' ? v * grid : v;
-    const toPxY = (v) => modeY === 'grid' ? v * grid : v;
+    const toPx = (v) => v * {{ grid_size }};
 
     ctx.save();
     ctx.strokeStyle = shape.color || '#000000';
 
     if (shape.type === 'rect' || shape.type === 'ellipse') {
-        const x = toPxX(shape.x);
-        const y = toPxY(shape.y);
-        const w = toPxX(shape.w);
-        const h = toPxY(shape.h);
+        const x = toPx(shape.x);
+        const y = toPx(shape.y);
+        const w = toPx(shape.w);
+        const h = toPx(shape.h);
 
         if (shape.type === 'rect') {
             ctx.strokeRect(x, y, w, h);
@@ -421,10 +402,10 @@ function drawShape(shape) {
         }
 
     } else if (shape.type === 'line') {
-        const x1 = toPxX(shape.x1);
-        const y1 = toPxY(shape.y1);
-        const x2 = toPxX(shape.x2);
-        const y2 = toPxY(shape.y2);
+        const x1 = toPx(shape.x1);
+        const y1 = toPx(shape.y1);
+        const x2 = toPx(shape.x2);
+        const y2 = toPx(shape.y2);
 
         ctx.beginPath();
         ctx.moveTo(x1, y1);