Add canvas support to pyide

[Copilot]

Pyide had no way to render graphics output, blocking use of pygame and other SDL-based libraries available in Pyodide. This adds a canvas attribute to the :::pyide directive that wires up an OffscreenCanvas to pyodide.canvas.setCanvas2D() in the web worker.

Changes

• remarkDirectivePyide.ts — Detects canvas attribute; sets data-canvas="true", injects a <canvas> element and a Canvas tab button into the output area
• client.js — On init, transfers the canvas to an OffscreenCanvas and posts it to the worker; adds showCanvas() tab logic; auto-switches to Canvas tab on run when in canvas mode
• webworker.js — Handles setCanvas message, stores OffscreenCanvas per pyide ID, calls pyodide.canvas.setCanvas2D(canvas) before each run
• style.css — Styles the canvas element with min-height: 300px
• en.json / de.json — Adds pyide-canvas translation key

Usage

:::pyide{canvas}

```python
import pygame
pygame.init()
screen = pygame.display.set_mode((400, 300))
screen.fill((0, 128, 255))
pygame.display.flip()

:::

The canvas transfers control to an `OffscreenCanvas` once at init time (irreversible per the browser API); errors during transfer or `setCanvas2D` are caught and surfaced without crashing the worker.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperbook-4fwa	Ready	Preview, Comment	May 9, 2026 3:35pm

[mikebarkmin]

@copilot add an example to the website for element pyide.