diff --git a/packages/element/src/shape.ts b/packages/element/src/shape.ts
index 7a8cd351a1..e7d832a9a9 100644
--- a/packages/element/src/shape.ts
+++ b/packages/element/src/shape.ts
@@ -24,6 +24,7 @@ import {
 } from "@excalidraw/common";
 
 import { RoughGenerator } from "roughjs/bin/generator";
+import chroma from "chroma-js";
 
 import type { GlobalPoint } from "@excalidraw/math";
 
@@ -70,6 +71,7 @@ import type {
   ExcalidrawFreeDrawElement,
   ElementsMap,
   ExcalidrawLineElement,
+  ExcalidrawBindableElement,
 } from "./types";
 
 import type { Drawable, Options } from "roughjs/bin/core";
@@ -105,6 +107,33 @@ export class ShapeCache {
     ShapeCache.cache = new WeakMap();
   };
 
+  public static generateBindableElementHighlight = <
+    T extends ExcalidrawBindableElement,
+  >(
+    element: T,
+    renderConfig?: {
+      isExporting: boolean;
+      canvasBackgroundColor: AppState["viewBackgroundColor"];
+      embedsValidationStatus: EmbedsValidationStatus;
+    },
+  ) => {
+    const shape = generateElementShape(
+      element,
+      ShapeCache.rg,
+      renderConfig || {
+        isExporting: false,
+        canvasBackgroundColor: COLOR_PALETTE.white,
+        embedsValidationStatus: null,
+      },
+    ) as Drawable;
+
+    shape.options.fill = "transparent";
+    shape.options.stroke = chroma(shape.options.stroke).desaturate().hex();
+    shape.options.strokeWidth = shape.options.strokeWidth * 1.1;
+
+    return shape;
+  };
+
   /**
    * Generates & caches shape for element if not already cached, otherwise
    * returns cached shape.
diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts
index 19fb6eac42..b44b5a74db 100644
--- a/packages/excalidraw/renderer/interactiveScene.ts
+++ b/packages/excalidraw/renderer/interactiveScene.ts
@@ -44,7 +44,6 @@ import {
 } from "@excalidraw/element";
 
 import { getCommonBounds, getElementAbsoluteCoords } from "@excalidraw/element";
-import chroma from "chroma-js";
 
 import type {
   SuggestedBinding,
@@ -194,15 +193,8 @@ const renderBindingHighlightForBindableElement = (
   context.translate(element.x, element.y);
 
   const rc = rough.canvas(context.canvas);
-  const drawable = ShapeCache.get(element)!;
-  const originalColor = drawable.options.stroke;
-  const originalStrokeWidth = drawable.options.strokeWidth;
-
-  drawable.options.stroke = chroma(drawable.options.stroke).desaturate().hex();
-  drawable.options.strokeWidth = drawable.options.strokeWidth * 1.1;
+  const drawable = ShapeCache.generateBindableElementHighlight(element);
   rc.draw(drawable);
-  drawable.options.stroke = originalColor;
-  drawable.options.strokeWidth = originalStrokeWidth;
 };
 
 const renderBindingHighlightForSuggestedPointBinding = (