Set handle left/top as percentages so that they adjust to changes in

zoom level automatically.

index.html

                                 context.stroke();
                             }
 
-                            function repositionHandle(handle) {
-                                let scale = scaledWidth / imageWidth;
-                                handle.style.left = (parseFloat(handle.dataset.left) * scale) + 'px';
-                                handle.style.top = (parseFloat(handle.dataset.top) * scale) + 'px';
-                            }
-
                             function resize() {
                                 sourceImage.style.width = scaledWidth + 'px';
-                                handles.forEach(repositionHandle);
                                 redrawOverlay();
                             }
 
+                            function repositionHandle(handle) {
+                                handle.style.left = (parseFloat(handle.dataset.left) / imageWidth * 100) + '%';
+                                handle.style.top = (parseFloat(handle.dataset.top) / imageHeight * 100) + '%';
+                            }
+
                             function dragMoveListener(event) {
                                 let target = event.target;
                                 let scale = scaledWidth / imageWidth;
                                 handle.className = 'handle';
                                 handle.dataset.left = corner.x;
                                 handle.dataset.top = corner.y;
-                                handle.style.left = handle.dataset.left + 'px';
-                                handle.style.top = handle.dataset.top + 'px';
+                                repositionHandle(handle);
                                 sourceImage.appendChild(handle);
                                 interact(handle).draggable({
                                     onmove: dragMoveListener