# XWUIChatCanvas

A freeform drawing surface for composing visual chat messages: it renders a hi-DPI `<canvas>` with pointer capture plus a toolbar of pen/eraser tools, a colour `palette` (`showColors`), a brush-size slider (`brushSize`), and Undo / Clear / Cancel / Send buttons. Sizing is set via `width`/`height`, an optional `backgroundImage` URL is drawn as a persistent backdrop (the "annotate a photo" pattern), and the finished drawing is handed back through `onSend()` as a PNG data URL and `Blob`; `readOnly` hides the toolbar and disables drawing, while `data.initialImage` resumes an in-progress sketch.

## Basic Usage

A 480x320 canvas with pen/eraser and colour swatches whose `onSend`, `onCancel`, and `onStroke` callbacks log the exported data-URL length, blob size, and per-stroke tool/colour/size.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Plain drawing canvas wired to onSend, onCancel, and onStroke loggers.
```

## Annotate Image

Loads a remote photo as the `backgroundImage` and pre-selects a red 6px brush with a custom `palette`, so strokes are drawn over the picture and Send returns the annotated composite.

```example
file: examples/AnnotateImage.ts
html: examples/AnnotateImage.html
title: Annotate Image
description: Draw on top of a background photo, exporting the merged annotated image.
```

## Signature Pad

A compact signature-capture surface locked to two ink colours and a fine brush, exporting the signed bitmap through onSend.

```example
file: examples/SignaturePad.ts
html: examples/SignaturePad.html
title: Signature Pad
description: A 460x200 two-colour signature pad whose onSend hands the signed bitmap to an approval flow.
```

## Received Sketch Viewer

A read-only canvas that hides the toolbar and renders an incoming drawing from data.initialImage - the recipient-side view of a sketch message.

```example
file: examples/ReceivedSketchViewer.ts
html: examples/ReceivedSketchViewer.html
title: Received Sketch Viewer
description: A readOnly canvas displaying a received sketch via data.initialImage with no editing toolbar.
```

```api
```