fix filters work. close #1697

src/Node.ts

@@ -343,10 +343,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       return;
     }
 
-    // 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;
+    // to avoid shift we need to increase size
+    // but we better to avoid it, for better filters flows
+    const extraPaddingX = Math.abs(Math.round(rect.x) - x) > 0.5 ? 1 : 0;
+    const extraPaddingY = Math.abs(Math.round(rect.y) - y) > 0.5 ? 1 : 0;
+    width += offset * 2 + extraPaddingX;
+    height += offset * 2 + extraPaddingY;
 
     x -= offset;
     y -= offset;

test/manual/Pixelate-test.ts

@@ -1,6 +1,5 @@
-import { assert } from 'chai';
-
 import { addStage, Konva, loadImage } from '../unit/test-utils';
+import { cloneAndCompareLayer } from '../unit/test-utils';
 
 describe('Pixelate', function () {
   // ======================================================
@@ -42,4 +41,25 @@ describe('Pixelate', function () {
       done();
     });
   });
+
+  it('make sure we have no extra transparent pixels', function (done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    Konva.Image.fromURL(
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABmCAYAAADS6F9hAAAAAXNSR0IArs4c6QAAAXJJREFUeF7t1cEJADAMw8B2/6Fd6BT3UCYQEiZ3205HGbhFoXp8mKJ4TYoCNilKUUQDIFM/pSigARCppRQFNAAitZSigAZApJZSFNAAiNRSigIaAJFaSlFAAyBSSykKaABEailFAQ2ASC2lKKABEKmlFAU0ACK1lKKABkCkllIU0ACI1FKKAhoAkVpKUUADIFJLKQpoAERqKUUBDYBILaUooAEQqaUUBTQAIrWUooAGQKSWUhTQAIjUUooCGgCRWkpRQAMgUkspCmgARGopRQENgEgtpSigARCppRQFNAAitZSigAZApJZSFNAAiNRSigIaAJFaSlFAAyBSSykKaABEailFAQ2ASC2lKKABEKmlFAU0ACK1lKKABkCkllIU0ACI1FKKAhoAkVpKUUADIFJLKQpoAERqKUUBDYBILaUooAEQqaUUBTQAIrWUooAGQKSWUhTQAIjUUooCGgCRWkpRQAMgUkspCmgARGopRQENgEgPgGOW3jCsp3sAAAAASUVORK5CYII=',
+      function (image) {
+        layer.add(image);
+
+        image.cache();
+        image.filters([Konva.Filters.Pixelate]);
+        image.pixelSize(4);
+        layer.draw();
+        cloneAndCompareLayer(layer);
+
+        done();
+      }
+    );
+  });
 });

test/unit/Node-cache-test.ts

@@ -1469,7 +1469,7 @@ describe('Caching', function () {
     layer.draw();
     assert.equal(
       circle._cache.get('canvas').filter.width,
-      21 * circle._cache.get('canvas').filter.pixelRatio
+      20 * circle._cache.get('canvas').filter.pixelRatio
     );
     circle.filters([]);
     // TODO: should we clear cache canvas?