Mask stays pixelated during editing (cvat-ai#7747)

ritikraj26 · Apr 11, 2024 · b13191d · b13191d
1 parent 3fe396c
commit b13191d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/changelog.d/20240410_160047_boris_pixelated_masks_layer.md b/changelog.d/20240410_160047_boris_pixelated_masks_layer.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- When user starts editing a mask, it becomes smoother (not pixelated)
+  (<https://github.com/cvat-ai/cvat/pull/7747>)
diff --git a/cvat-canvas/src/scss/canvas.scss b/cvat-canvas/src/scss/canvas.scss
@@ -430,6 +430,8 @@ g.cvat_canvas_shape_occluded {
 }
 
 .cvat_masks_canvas_wrapper {
+    @extend .cvat_canvas_pixelized;
+
     z-index: 3;
     display: none;
 }

diff --git a/cvat-canvas/src/typescript/masksHandler.ts b/cvat-canvas/src/typescript/masksHandler.ts
@@ -90,12 +90,12 @@ export class MasksHandlerImpl implements MasksHandler {
                 opacity: 0.75,
                 left: this.latestMousePos.x - this.tool.size / 2,
                 top: this.latestMousePos.y - this.tool.size / 2,
-                stroke: 'white',
                 strokeWidth: 1,
+                stroke: 'white',
             };
             this.brushMarker = this.tool.form === 'circle' ? new fabric.Circle({
                 ...common,
-                radius: this.tool.size / 2,
+                radius: Math.round(this.tool.size / 2),
             }) : new fabric.Rect({
                 ...common,
                 width: this.tool.size,
@@ -473,7 +473,7 @@ export class MasksHandlerImpl implements MasksHandler {
                 if (tool.form === 'circle') {
                     shape = new fabric.Circle({
                         ...shapeProperties,
-                        radius: tool.size / 2,
+                        radius: Math.round(tool.size / 2),
                     });
                 } else if (tool.form === 'square') {
                     shape = new fabric.Rect({