# Scrawl-canvas v8 - Canvas test 037

## Pan and zoom using a Picture entity

### Use the mouse scroll button to zoom the canvas display, and drag/drop to pan around the display

#### Test purpose

- Crerate a Picture entity hat displays a large image asset
- Add event listeners that allow the user to zoom the image in/out within the Picture. Zooming out should be constrained so that no blank space appears at the Picture's edges: when the image edge zooms past the Picture edge, it sticks to the edge. Wherever possible (as constrained by edges), the zoom effect should center on the mouse cursor.
- Add event listeners that allow the user to drag the image within the Picture; again, drag should be constrained so that no blank space appears at the Picture's edges

Touch test: TODO: find a way to allow touch users to zoom in on the image while not zooming the rest of the browser output; differentiate between single touch (pan dragging) and multiple touches (for zoom/pinch)

Annotated code