Add gfx_canvas_demo example and Playwright coverage

- examples/gfx_canvas_demo.bas: PETSCII + LOADSPRITE/DRAWSPRITE sample
- examples/gfx_canvas_demo.png (8x8 red) and web/gfx_canvas_demo.png for HTTP fetch in tests
- wasm_browser_canvas_test: load demo source, fetch PNG into MEMFS, assert sprite pixel
- README, gfx-canvas-parity.md, CHANGELOG: document usage

Co-authored-by: Chris Garrett <chris@chrisg.com>

Author: cursoragent

CHANGELOG.md

@@ -12,6 +12,7 @@
   - **Tutorial embedding**: `make basic-wasm-modular` → `web/basic-modular.js` + `basic-modular.wasm` (`MODULARIZE=1`, `createBasicModular`). `web/tutorial-embed.js` mounts multiple terminal-style interpreters per page (`CbmBasicTutorialEmbed.mount`). Guide: `docs/tutorial-embedding.md`; example: `web/tutorial-example.html`. Test: `make wasm-tutorial-test`.
   - **Virtual FS upload/export**: `web/vfs-helpers.js` — `CbmVfsHelpers.vfsUploadFiles`, `vfsExportFile`, `vfsMountUI` (browser → MEMFS and MEMFS → download). Wired into `web/index.html`, `web/canvas.html`, and tutorial embeds (`showVfsTools`). CI WASM artifacts include `vfs-helpers.js`.
   - **Canvas GFX parity with basic-gfx**: `SCREEN 1` bitmap rendering; software PNG sprites (`gfx/gfx_software_sprites.c`, vendored `gfx/stb_image.h`) replacing the old WASM sprite stubs; compositing order matches Raylib (base then z-sorted sprites). `web/canvas.html` draws `#OPTION border` padding from `Module.wasmGfxBorderPx` / `wasmGfxBorderColorIdx`. Guide: `docs/gfx-canvas-parity.md`. `tests/wasm_browser_canvas_test.py` covers bitmap + sprite smoke.
+  - **Example**: `examples/gfx_canvas_demo.bas` + `gfx_canvas_demo.png` (and `web/gfx_canvas_demo.png` for Playwright fetch); canvas test runs the full demo source.
 
 - **80-column option (terminal + basic-gfx + WASM canvas)**
   - **Terminal**: `#OPTION columns N` / `-columns N` (1–255); default 40. Comma/TAB zones scale: 10 at 40 cols, 20 at 80 cols. `#OPTION nowrap` / `-nowrap`: disable wrapping.

README.md

@@ -407,6 +407,7 @@ The `examples` folder (included in release archives) contains:
 - `examples/dungeon.bas`: larger PETSCII dungeon-style map with `POKE`/screen RAM and custom charset data (terminal or `basic-gfx` with `-petscii`).
 - `examples/gfx_game_shell.bas`: **basic-gfx** tutorial game — tile `DATA`, `POKE` map, `LOADSPRITE`/`DRAWSPRITE` for 8×8 PNG actors (`player.png`, `enemy.png`) and HUD (`hud_panel.png`), `INKEY$()` + enemy chase. Run: `./basic-gfx examples/gfx_game_shell.bas`.
 - `examples/gfx_sprite_hud_demo.bas`: minimal **DRAWSPRITE** over PETSCII (semi-transparent `hud_panel.png`); comments explain pixel vs text-row coordinates.
+- `examples/gfx_canvas_demo.bas` + `examples/gfx_canvas_demo.png`: small **PETSCII + PNG sprite** sample for **basic-gfx** or **`web/canvas.html`** (upload the PNG to the virtual filesystem, or use `web/gfx_canvas_demo.png` when serving `web/`).
 - `examples/colaburger_viewer.bas`, `examples/gfx_colaburger_viewer.bas`, and `examples/colaburger.seq`: PETSCII .seq file viewer.
   - **.seq files** are sequential dumps of PETSCII screen codes (e.g. from BBS logs or PETSCII art).
   - The terminal viewer reads the file byte-by-byte with `GET#`, prints each byte via `CHR$`, and wraps after
@@ -508,13 +509,13 @@ make basic-gfx
 make basic-wasm
 # Optional: MODULARIZE terminal build for embedding multiple interpreters (see docs/tutorial-embedding.md)
 make basic-wasm-modular
-# Optional: 40×25 PETSCII canvas (GfxVideoState; no Raylib/sprites in browser)
+# Optional: 40×25 PETSCII canvas (GfxVideoState; bitmap + PNG sprites in browser)
 make basic-wasm-canvas
 ```
 
 Produces `web/basic.js` and `web/basic.wasm` (Asyncify-enabled), **`web/basic-modular.js`** / **`web/basic-modular.wasm`** for **`tutorial-embed.js`**, and optionally `web/basic-canvas.js` / `web/basic-canvas.wasm` plus **`web/canvas.html`** for a Canvas 2D PETSCII screen. Serve `web/` over HTTP (e.g. `cd web && python3 -m http.server 8080`) and open in a browser. The terminal demo uses an inline **INPUT** field and keyboard routing for **GET** / **INKEY$**; see `web/README.md` for details.
 
-**PETSCII canvas** (no Raylib): `make basic-wasm-canvas` produces `web/basic-canvas.js`, `web/basic-canvas.wasm`, and `web/canvas.html`. The page refreshes the canvas during `SLEEP` and loops via a shared RGBA framebuffer.
+**PETSCII canvas** (no Raylib): `make basic-wasm-canvas` produces `web/basic-canvas.js`, `web/basic-canvas.wasm`, and `web/canvas.html`. The page refreshes the canvas during `SLEEP` and loops via a shared RGBA framebuffer (PETSCII, `SCREEN 1` bitmap, and **`LOADSPRITE`/`DRAWSPRITE`** like **basic-gfx**). Try **`examples/gfx_canvas_demo.bas`**: paste into the canvas page, use **Upload to VFS** to add **`gfx_canvas_demo.png`** (same file is copied to **`web/gfx_canvas_demo.png`** for local fetch tests), then Run.
 
 **Automated WASM smoke tests** (headless Chromium via Playwright): install `pip install -r tests/requirements-wasm.txt`, run `python3 -m playwright install chromium`, then `make wasm-test`, `make wasm-canvas-test`, and **`make wasm-tutorial-test`**. These run in GitHub Actions for **tagged releases** and the **nightly** workflow; artifacts include `cbm-basic-wasm.tar.gz` (terminal, modular tutorial files, and canvas).
 

docs/gfx-canvas-parity.md

@@ -31,4 +31,8 @@ The browser build `make basic-wasm-canvas` targets the same **GfxVideoState** mo
 
 ## Tests
 
-`make wasm-canvas-test` checks **bitmap mode** (`SCREEN 1` + `PSET`) and **sprite overlay** (fetch `testfixtures/red8x8.png` into MEMFS, `LOADSPRITE` + `DRAWSPRITE`, sample a red pixel).
+`make wasm-canvas-test` checks **bitmap mode** (`SCREEN 1` + `PSET`), **sprite overlay** (fetch `testfixtures/red8x8.png` into MEMFS), and the **`examples/gfx_canvas_demo.bas`** program (fetch `gfx_canvas_demo.png` from the static `web/` copy into MEMFS, assert a red pixel inside the drawn sprite).
+
+## Example program
+
+`examples/gfx_canvas_demo.bas` — two `PRINT` lines plus `LOADSPRITE` / `DRAWSPRITE` for `gfx_canvas_demo.png` (8×8 solid red PNG, same asset as `tests/fixtures/red8x8.png`).

examples/gfx_canvas_demo.bas

@@ -0,0 +1,10 @@
+1 REM Browser canvas demo: PETSCII + PNG overlay (same LOADSPRITE/DRAWSPRITE as basic-gfx).
+2 REM Native: ./basic-gfx examples/gfx_canvas_demo.bas  (needs gfx_canvas_demo.png beside this file)
+3 REM WASM: put gfx_canvas_demo.png on MEMFS root (e.g. canvas Upload, or fetch in tests).
+10 PRINT CHR$(14)
+20 PRINT "{CLR}{WHT}CANVAS DEMO{CYN} - red 8x8 PNG at pixel (100,100)"
+30 PRINT "{GREY2}SPRITE z=50 draws above text."
+40 LOADSPRITE 0,"gfx_canvas_demo.png"
+50 DRAWSPRITE 0,100,100,50
+60 SLEEP 120
+70 END

examples/gfx_canvas_demo.png

@@ -12,6 +12,7 @@
 
 ROOT = Path(__file__).resolve().parents[1]
 WEB = ROOT / "web"
+GFX_CANVAS_DEMO_BAS = ROOT / "examples" / "gfx_canvas_demo.bas"
 
 
 def _serve_web() -> tuple[socketserver.TCPServer, int]:
@@ -249,6 +250,41 @@ def main() -> int:
                 browser.close()
                 raise RuntimeError(f"sprite test error log: {log_sp!r}")
 
+            # Full example: examples/gfx_canvas_demo.bas + gfx_canvas_demo.png (served from web/)
+            if not GFX_CANVAS_DEMO_BAS.is_file():
+                browser.close()
+                raise RuntimeError(f"missing {GFX_CANVAS_DEMO_BAS}")
+            page.wait_for_function(
+                "() => !document.getElementById('run').disabled",
+                timeout=60000,
+            )
+            demo_src = GFX_CANVAS_DEMO_BAS.read_text(encoding="utf-8")
+            page.evaluate(
+                """async () => {
+              const r = await fetch('gfx_canvas_demo.png');
+              const buf = await r.arrayBuffer();
+              Module.FS.writeFile('/gfx_canvas_demo.png', new Uint8Array(buf));
+            }"""
+            )
+            page.fill("#program", demo_src)
+            _click_run(page)
+            time.sleep(0.8)
+            demo_px = _canvas_pixel_rgba(page, 104, 104)
+            dr, dg, db = int(demo_px[0]), int(demo_px[1]), int(demo_px[2])
+            if dr < 200 or dg > 80 or db > 80:
+                browser.close()
+                raise RuntimeError(
+                    f"gfx_canvas_demo: expected red inside sprite at (104,104), got rgba={demo_px!r}"
+                )
+            page.wait_for_function(
+                "() => (window.Module && Module.wasmGfxRunDone === 1)",
+                timeout=120000,
+            )
+            log_demo = page.text_content("#log") or ""
+            if log_demo.strip():
+                browser.close()
+                raise RuntimeError(f"gfx_canvas_demo error log: {log_demo!r}")
+
             browser.close()
     finally:
         httpd.shutdown()