---
title: "Image Canvas — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Consta Design · Backgrounds. Image Canvas Container with Controls"
canonical: "https://framer.elliotli.dev/component/image-canvas"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Image Canvas

# Image Canvas

Image Canvas Container with Controls

[View on Framer](https://framer.com/marketplace/components/image-canvas/?via=elliot-li)

![Image Canvas preview image 1](https://framer.elliotli.dev/og/component/image-canvas/970aaee825c6b9c2/1600x1200.jpg)

## Summary

Image Canvas Container with Controls

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #9247

## Details

- **Author**: Consta Design
- **Price**: $5.00
- **Published**: 2026-02-18
- **Updated**: 2026-06-15
- **Added**: 2026-02-05
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background