Canvas Component (canvas.tsx)

Types

CanvasProps

Props for the Canvas component:

• imageUrl?: string – The URL of the image to display.

• error?: string – An optional error message to display.

ImageLoadError

Describes an image loading error:

• type: 'load' | 'network' | 'invalid'

• message: Error message string.

---

Component

Canvas({ imageUrl, error }: CanvasProps)

Displays an image, a loading indicator, an error message, or a placeholder depending on the state.

State:

• isLoading: Whether the image is currently loading.

• loadError: Any error encountered while loading the image.

Effects:

• Watches imageUrl for changes.

• Loads the image and sets loading/error state accordingly.

• Cleans up event handlers and state on unmount or when imageUrl changes.

Rendering Logic:

• If there is an error (from props or loading), displays the error message.

• If loading, displays a loading message.

• If an image is loaded (and not the default /clear.jpg), displays the image.

• Otherwise, displays a placeholder prompt.

Error Handling:

• Handles image load failures and invalid URLs.

• Provides user-friendly error messages for different failure scenarios.