From af729ed7addcf8da9ef7936ab739573de4dfab25 Mon Sep 17 00:00:00 2001
From: Armen Rohalov <rohalov777@gmail.com>
Date: Thu, 1 May 2025 22:19:57 +0300
Subject: [PATCH] fix annotation photo

---
 src/components/CanvasEditor/CanvasEditor.js | 4 +++-
 src/services/AnnotationService.js           | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/CanvasEditor/CanvasEditor.js b/src/components/CanvasEditor/CanvasEditor.js
index 539b155..6f02cc9 100644
--- a/src/components/CanvasEditor/CanvasEditor.js
+++ b/src/components/CanvasEditor/CanvasEditor.js
@@ -148,7 +148,7 @@ function CanvasEditor({
         if (isDragging || resizeData) {
             e.stopPropagation();
         }
-
+        
         if (currentDetection && mouseDownPos) {
             const dx = Math.abs(currentDetection.x2 - currentDetection.x1);
             const dy = Math.abs(currentDetection.y2 - currentDetection.y1);
@@ -161,6 +161,8 @@ function CanvasEditor({
                     y1: Math.min(currentDetection.y1, currentDetection.y2),
                     x2: Math.max(currentDetection.x1, currentDetection.x2),
                     y2: Math.max(currentDetection.y1, currentDetection.y2),
+                    kw: width / containerRef.current.offsetWidth,
+                    kh: height / containerRef.current.offsetHeight
                 };
 
                 const newDetections = [...localDetections, normalizedDetection];
diff --git a/src/services/AnnotationService.js b/src/services/AnnotationService.js
index dce6ed5..594205e 100644
--- a/src/services/AnnotationService.js
+++ b/src/services/AnnotationService.js
@@ -52,10 +52,10 @@ export const createAnnotationImage = (videoRef, detections, containerRef) => {
             ctx.fillStyle = bgColor;
             ctx.strokeStyle = borderColor;
 
-            const x = Math.max(0, detection.x1 || 0);
-            const y = Math.max(0, detection.y1 || 0);
-            const width = Math.max(1, (detection.x2 || 0) - (detection.x1 || 0));
-            const height = Math.max(1, (detection.y2 || 0) - (detection.y1 || 0));
+            const x = Math.max(0, detection.x1 || 0) * detection.kw;
+            const y = Math.max(0, detection.y1 || 0) * detection.kh;
+            const width = Math.max(1, (detection.x2 || 0) - (detection.x1 || 0)) * detection.kw;
+            const height = Math.max(1, (detection.y2 || 0) - (detection.y1 || 0)) * detection.kh;
 
             ctx.fillRect(x, y, width, height);
             ctx.lineWidth = 2;