Missaligned #source-img-canvas & #source-pts-canvas

[Lucas-C]

Seems like those 2 HTML elements should be aligned, but aren't:

I'm using Firefox 86.

There is a potential fix:

diff --git a/web/webmorphing/templates/home.html b/web/webmorphing/templates/home.html
index 92a6789..91c3e5f 100644
--- a/web/webmorphing/templates/home.html
+++ b/web/webmorphing/templates/home.html
@@ -34,8 +34,8 @@
                         <div class="card box-shadow">
                             <div class="card-top">
                                 <div style="position: relative;">
-                                    <canvas class="img-canvas" id="source-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0;"></canvas>
-                                    <canvas class="img-canvas" id="source-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
+                                    <canvas class="img-canvas" id="source-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0; display: block;"></canvas>
+                                    <canvas class="img-canvas" id="source-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1; margin-top: 0;"></canvas>
                                 </div>
                                 <div class="img-canvas-placeholder justify-content-center" id="source-img-placeholder">
                                     <i class="far fa-file-image fa-7x text-muted"></i>
@@ -59,8 +59,8 @@
                         <div class="card box-shadow" id="middle-img-card" hidden>
                             <div class="card-top">
                                 <div style="position: relative;">
-                                    <canvas class="img-canvas" id="middle-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0;"></canvas>
-                                    <canvas class="img-canvas" id="middle-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
+                                    <canvas class="img-canvas" id="middle-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0; display: block;"></canvas>
+                                    <canvas class="img-canvas" id="middle-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1; margin-top: 0;"></canvas>
                                 </div>
                                 <div class="img-canvas-placeholder justify-content-center" id="middle-img-placeholder">
                                     <i class="far fa-file-image fa-7x text-muted"></i>
@@ -85,8 +85,8 @@
                         <div class="card box-shadow">
                             <div class="card-top">
                                 <div style="position: relative;">
-                                    <canvas class="img-canvas" id="target-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0;"></canvas>
-                                    <canvas class="img-canvas" id="target-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
+                                    <canvas class="img-canvas" id="target-img-canvas" style="position: relative; left: 0; top: 0; z-index: 0; display: block;"></canvas>
+                                    <canvas class="img-canvas" id="target-pts-canvas" style="position: absolute; left: 0; top: 0; z-index: 1; margin-top: 0;"></canvas>
                                 </div>
                                 <div class="img-canvas-placeholder justify-content-center" id="target-img-placeholder">
                                     <i class="far fa-file-image fa-7x text-muted"></i>