Image Canvas — Image Canvas Container with Controls

A canvas-like image container component . Drag/pan to explore, pinch to zoom on touch devices, and optionally zoom with the mouse wheel. Includes optional on-canvas controls.

Great for

• Portfolio sections with interactive exploration

• Diagrams, illustrations, and detailed artwork

• Maps and floor plans

• Large images that need inspection

• Moodboards and visual references

Features

• Mouse drag with grab/grabbing cursor support

• Touch pan + pinch-to-zoom on mobile

• Optional wheel zoom focused on the cursor

• Auto "Recenter" button after panning

• Configurable initial alignment (horizontal + vertical)

• Fully compatible with CMS

Styling

• Image Radius

• Background Fill

• Border + Border Radius

• Horizontal Align + Vertical Align

• Default Zoom %

• Show Zoom Controls

• Zoom on Scroll (optional)

• Controls Scale

Notes

• If "Zoom on Scroll" is enabled, the component prevents page scrolling while hovering it, so avoid setting it to fill the viewport.

• The canvas editor may occasionally show a slightly misaligned state, but it won't appear in preview/live. Changing any property forces a refresh.