diff --git a/src/canvas/Layer.ts b/src/canvas/Layer.ts
index 100ea80b9..ed6dbb162 100644
--- a/src/canvas/Layer.ts
+++ b/src/canvas/Layer.ts
@@ -269,7 +269,7 @@ export default class Layer extends Eventful {
                  * if it's currently on the canvas and needs repaint this frame
                  * or not painted this frame.
                  */
-                const shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
+                const shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true, true);
                 const prevRect = el.__isRendered && ((el.__dirty & REDRAW_BIT) || !shouldPaint)
                     ? el.getPrevPaintRect()
                     : null;
@@ -311,7 +311,7 @@ export default class Layer extends Eventful {
              * rect if and only if it's not painted this frame and was
              * previously painted on the canvas.
              */
-            const shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
+            const shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true, true);
             if (el && (!shouldPaint || !el.__zr) && el.__isRendered) {
                 // el was removed
                 const prevRect = el.getPrevPaintRect();
diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts
index fb3a145eb..c65c77dad 100644
--- a/src/canvas/graphic.ts
+++ b/src/canvas/graphic.ts
@@ -615,7 +615,7 @@ export function brush(
 ) {
     const m = el.transform;
 
-    if (!el.shouldBePainted(scope.viewWidth, scope.viewHeight, false, false)) {
+    if (!el.shouldBePainted(scope.viewWidth, scope.viewHeight, false, false, false)) {
         // Needs to mark el rendered.
         // Or this element will always been rendered in progressive rendering.
         // But other dirty bit should not be cleared, otherwise it cause the shape
diff --git a/src/graphic/Displayable.ts b/src/graphic/Displayable.ts
index 20223e889..c613a48b3 100644
--- a/src/graphic/Displayable.ts
+++ b/src/graphic/Displayable.ts
@@ -195,7 +195,8 @@ class Displayable<Props extends DisplayableProps = DisplayableProps> extends Ele
         viewWidth: number,
         viewHeight: number,
         considerClipPath: boolean,
-        considerAncestors: boolean
+        considerAncestors: boolean,
+        considerHostTarget: boolean
     ) {
         const m = this.transform;
         if (
@@ -234,6 +235,23 @@ class Displayable<Props extends DisplayableProps = DisplayableProps> extends Ele
             }
         }
 
+        // consider host target
+        if (
+            considerAncestors
+            && considerHostTarget
+            && this.parent
+            && this.parent.__hostTarget
+        ) {
+            let hostTarget = this.parent.__hostTarget;
+            let parent = hostTarget;
+            while (parent) {
+                if (parent.ignore) {
+                    return false;
+                }
+                parent = parent.parent;
+            }
+        }
+
         return true;
     }