diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts
index 311d218752a..19c756294d5 100644
--- a/src/canvas/Canvas.ts
+++ b/src/canvas/Canvas.ts
@@ -328,14 +328,14 @@ export class Canvas extends SelectableCanvas implements CanvasOptions {
     if (source) {
       ctx.save();
       source.transform(ctx);
-      source.renderDragSourceEffect(e);
+      source.renderDragSourceEffect(e, ctx);
       ctx.restore();
       dirty = true;
     }
     if (target) {
       ctx.save();
       target.transform(ctx);
-      target.renderDropTargetEffect(e);
+      target.renderDropTargetEffect(e, ctx);
       ctx.restore();
       dirty = true;
     }
diff --git a/src/shapes/IText/IText.test.ts b/src/shapes/IText/IText.test.ts
index 56e2bc054ad..477346c06fc 100644
--- a/src/shapes/IText/IText.test.ts
+++ b/src/shapes/IText/IText.test.ts
@@ -1,4 +1,4 @@
-import type { Canvas } from '../../canvas/Canvas';
+import { Canvas } from '../../canvas/Canvas';
 import '../../../jest.extend';
 import { Group } from '../Group';
 import { IText } from './IText';
@@ -27,11 +27,10 @@ describe('IText', () => {
         group.setCoords();
         const fillRect = jest.fn();
         const getZoom = jest.fn().mockReturnValue(zoom);
-        const mockContext = { fillRect };
-        const mockCanvas = { contextTop: mockContext, getZoom };
-        jest.replaceProperty(text, 'canvas', mockCanvas as unknown as Canvas);
+        const canvas = new Canvas();
+        jest.replaceProperty(text, 'canvas', canvas);
 
-        text.renderCursorAt(1);
+        text.renderCursorAt(canvas.getTopContext(), 1);
         const call = fillRect.mock.calls[0];
         expect({ width: call[2], height: call[3] }).toMatchSnapshot({
           cloneDeepWith: (value) =>
diff --git a/src/shapes/IText/IText.ts b/src/shapes/IText/IText.ts
index 7ed312ec130..5b227ad36fd 100644
--- a/src/shapes/IText/IText.ts
+++ b/src/shapes/IText/IText.ts
@@ -478,13 +478,12 @@ export class IText<
   }
 
   /**
-   * Renders cursor on context Top, outside the animation cycle, on request
+   * Renders cursor on {@link ctx}, outside the animation cycle, on request.
    * Used for the drag/drop effect.
-   * If contextTop is not available, do nothing.
    */
-  renderCursorAt(selectionStart: number) {
+  renderCursorAt(ctx: CanvasRenderingContext2D, selectionStart: number) {
     const boundaries = this._getCursorBoundaries(selectionStart, true);
-    this._renderCursor(this.canvas!.contextTop, boundaries, selectionStart);
+    this._renderCursor(ctx, boundaries, selectionStart);
   }
 
   /**
@@ -550,21 +549,21 @@ export class IText<
   }
 
   /**
-   * Renders drag start text selection
+   * @override Render drag start text selection
    */
-  renderDragSourceEffect() {
+  renderDragSourceEffect(e: DragEvent, ctx: CanvasRenderingContext2D) {
     const dragStartSelection =
       this.draggableTextDelegate.getDragStartSelection()!;
     this._renderSelection(
-      this.canvas!.contextTop,
+      ctx,
       dragStartSelection,
       this._getCursorBoundaries(dragStartSelection.selectionStart, true)
     );
   }
 
-  renderDropTargetEffect(e: DragEvent) {
+  renderDropTargetEffect(e: DragEvent, ctx: CanvasRenderingContext2D) {
     const dragSelection = this.getSelectionStartFromPointer(e);
-    this.renderCursorAt(dragSelection);
+    this.renderCursorAt(ctx, dragSelection);
   }
 
   /**
diff --git a/src/shapes/Object/InteractiveObject.ts b/src/shapes/Object/InteractiveObject.ts
index 1a8c1b9b9e8..5fc1867aaaf 100644
--- a/src/shapes/Object/InteractiveObject.ts
+++ b/src/shapes/Object/InteractiveObject.ts
@@ -682,20 +682,22 @@ export class InteractiveFabricObject<
    * example: render the selection status for the part of text that is being dragged from a text object
    * @public
    * @param {DragEvent} e
+   * @param {CanvasRenderingContext2D} ctx transformed into object plane
    */
-  renderDragSourceEffect(e: DragEvent) {
+  renderDragSourceEffect(e: DragEvent, ctx: CanvasRenderingContext2D) {
     // for subclasses
   }
 
   /**
    * Override to customize drag and drop behavior
    * render a specific effect when an object is the target of a drag event
-   * used to show that the underly object can receive a drop, or to show how the
+   * used to show that the underlay object can receive a drop, or to show how the
    * object will change when dropping. example: show the cursor where the text is about to be dropped
    * @public
    * @param {DragEvent} e
+   * @param {CanvasRenderingContext2D} ctx transformed into object plane
    */
-  renderDropTargetEffect(e: DragEvent) {
+  renderDropTargetEffect(e: DragEvent, ctx: CanvasRenderingContext2D) {
     // for subclasses
   }
 }