React Konva Group Shadow (Vite + TS)

A minimal example showing group-level shadow rendering in Konva using a small runtime patch. The shadow is drawn beneath a cached Group, leaving the group content clean.

Features

• Group-level shadow for Konva Group via cached bitmap
• Sliders: blur, opacity, offsetX, offsetY

Install

npm i

Develop

npm run dev

Open the app, toggle “Group shadow enabled”, move sliders, and drag/transform the group. The shadow stays beneath the content.

Key files

• src/konva-patch-group-shadow.ts: runtime patch that hooks Konva.Group.prototype.drawScene to render the shadow using the group cache
• src/App.tsx: React Konva demo using a cached Group, sliders, and a Transformer

How it works

1. The Group is cached (group.cache()), enabling access to its cached scene canvas
2. On draw, we paint the cached image with canvas shadow styles
3. Immediately erase the image portion using destination-out, leaving only the shadow underneath
4. The original drawScene runs, drawing the group content normally

Shadow props live on the Group:

• shadowEnabled, shadowColor, shadowBlur, shadowOpacity, shadowOffset

Cache refresh: called initially and after drag/transform to keep the cache in sync.

License

MIT