---
name: "canvas-webp-lossless-exporter"
description: "Export high-resolution raster images from HTML5 canvas without compression artifacts."
metadata:
  author: "MDN Web Docs"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "export canvas to image webp"
  - "download canvas as high res image"
  - "convert canvas to blob"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# HTML5 Canvas Lossless WebP & AVIF Exporter

Converts interactive HTML5 Canvas drawings into downloadable high-res PNG, lossless WebP, and AVIF blobs: canvas.toBlob, offscreen rendering, and client-side download triggers.

## When to Invoke
Invoke this skill whenever you need to:
- export canvas to image webp
- download canvas as high res image
- convert canvas to blob

## Execution SOP & Rules
1. Use canvas.toBlob((blob) => { ... }, 'image/webp', 1.0) for lossless image generation.
2. Create temporary download link: const url = URL.createObjectURL(blob); link.href = url; link.download = 'chart.webp'.
3. Revoke object URLs after triggering download: URL.revokeObjectURL(url) to prevent memory leaks.
4. Render at 2x or 3x virtual resolution on an off-screen canvas prior to exporting.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.