remove rounding from getClientRect

src/Node.ts

@@ -322,8 +322,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     var width = Math.ceil(conf.width || rect.width),
       height = Math.ceil(conf.height || rect.height),
       pixelRatio = conf.pixelRatio,
-      x = conf.x === undefined ? rect.x : conf.x,
-      y = conf.y === undefined ? rect.y : conf.y,
+      x = conf.x === undefined ? Math.floor(rect.x) : conf.x,
+      y = conf.y === undefined ? Math.floor(rect.y) : conf.y,
       offset = conf.offset || 0,
       drawBorder = conf.drawBorder || false,
       hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
@@ -335,12 +335,25 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       return;
     }
 
-    width += offset * 2;
-    height += offset * 2;
+    // let's just add 1 pixel extra,
+    // because using Math.floor on x, y position may shift drawing
+    width += offset * 2 + 1;
+    height += offset * 2 + 1;
 
     x -= offset;
     y -= offset;
 
+    // if (Math.floor(x) < x) {
+    //   x = Math.floor(x);
+    //   // width += 1;
+    // }
+    // if (Math.floor(y) < y) {
+    //   y = Math.floor(y);
+    //   // height += 1;
+    // }
+
+    // console.log({ x, y, width, height }, rect);
+
     var cachedSceneCanvas = new SceneCanvas({
         pixelRatio: pixelRatio,
         width: width,

src/Shape.ts

@@ -538,19 +538,19 @@ export class Shape<
     // if stroke, for example = 3
     // we need to set x to 1.5, but after Math.round it will be 2
     // as we have additional offset we need to increase width and height by 1 pixel
-    let roundingOffset = 0;
-    if (Math.round(strokeWidth / 2) !== strokeWidth / 2) {
-      roundingOffset = 1;
-    }
+    // let roundingOffset = 0;
+    // if (Math.round(strokeWidth / 2) !== strokeWidth / 2) {
+    //   roundingOffset = 1;
+    // }
     const rect = {
-      width: width + roundingOffset,
-      height: height + roundingOffset,
+      width: width,
+      height: height,
       x:
-        -Math.round(strokeWidth / 2 + blurRadius) +
+        -(strokeWidth / 2 + blurRadius) +
         Math.min(shadowOffsetX, 0) +
         fillRect.x,
       y:
-        -Math.round(strokeWidth / 2 + blurRadius) +
+        -(strokeWidth / 2 + blurRadius) +
         Math.min(shadowOffsetY, 0) +
         fillRect.y,
     };

src/shapes/Arc.ts

@@ -62,26 +62,32 @@ export class Arc extends Shape<ArcConfig> {
   }
 
   getSelfRect() {
-    const innerRadius = this.innerRadius()
-    const outerRadius = this.outerRadius()
-    const clockwise = this.clockwise()
+    const innerRadius = this.innerRadius();
+    const outerRadius = this.outerRadius();
+    const clockwise = this.clockwise();
     const angle = Konva.getAngle(clockwise ? 360 - this.angle() : this.angle());
 
-    const boundLeftRatio = Math.cos(Math.min(angle, Math.PI))
-    const boundRightRatio = 1
-    const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle),  3 * Math.PI / 2))
-    const boundBottomRatio = Math.sin(Math.min(angle,  Math.PI / 2))
-    const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius)
-    const boundRight = boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius)
-    const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius)
-    const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius)
-    
+    const boundLeftRatio = Math.cos(Math.min(angle, Math.PI));
+    const boundRightRatio = 1;
+    const boundTopRatio = Math.sin(
+      Math.min(Math.max(Math.PI, angle), (3 * Math.PI) / 2)
+    );
+    const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
+    const boundLeft =
+      boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
+    const boundRight =
+      boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius);
+    const boundTop =
+      boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
+    const boundBottom =
+      boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
+
     return {
-      x: Math.round(boundLeft),
-      y: Math.round(clockwise ? -1 * boundBottom : boundTop),
-      width: Math.round(boundRight - boundLeft),
-      height: Math.round(boundBottom - boundTop)
-    }
+      x: boundLeft,
+      y: clockwise ? -1 * boundBottom : boundTop,
+      width: boundRight - boundLeft,
+      height: boundBottom - boundTop,
+    };
   }
 
   innerRadius: GetSet<number, this>;

src/shapes/Path.ts

@@ -188,10 +188,10 @@ export class Path extends Shape<PathConfig> {
       }
     }
     return {
-      x: Math.round(minX),
-      y: Math.round(minY),
-      width: Math.round(maxX - minX),
-      height: Math.round(maxY - minY),
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY,
     };
   }
   /**

src/shapes/TextPath.ts

@@ -646,10 +646,10 @@ Factory.addGetterSetter(TextPath, 'align', 'left');
  * @param {Number} letterSpacing
  * @returns {Number}
  * @example
- * // get line height
+ * // get letter spacing value
  * var letterSpacing = shape.letterSpacing();
  *
- * // set the line height
+ * // set the letter spacing value
  * shape.letterSpacing(2);
  */
 
@@ -662,10 +662,10 @@ Factory.addGetterSetter(TextPath, 'letterSpacing', 0, getNumberValidator());
  * @param {String} textBaseline
  * @returns {String}
  * @example
- * // get line height
+ * // get current text baseline
  * var textBaseline = shape.textBaseline();
  *
- * // set the line height
+ * // set new text baseline
  * shape.textBaseline('top');
  */
 Factory.addGetterSetter(TextPath, 'textBaseline', 'middle');