The Complete Production SOP: How to Deploy and Run HTML5 Canvas Lossless WebP & AVIF Exporter in Autonomous AI Agents

---
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.

export interface ExportCanvasOptions {
  readonly scaleFactor?: number;
  readonly filename?: string;
  readonly format?: 'image/webp' | 'image/avif' | 'image/png';
}

export async function exportCanvasLossless(
  sourceCanvas: HTMLCanvasElement,
  options: ExportCanvasOptions = {}
): Promise<Blob> {
  const {
    scaleFactor = 2,
    filename = 'export.webp',
    format = 'image/webp'
  } = options;

  const offscreen = document.createElement('canvas');
  offscreen.width = sourceCanvas.width * scaleFactor;
  offscreen.height = sourceCanvas.height * scaleFactor;

  const ctx = offscreen.getContext('2d', { alpha: true });
  if (!ctx) throw new Error('Failed to acquire 2D context for offscreen canvas');

  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'high';
  ctx.scale(scaleFactor, scaleFactor);
  ctx.drawImage(sourceCanvas, 0, 0);

  return new Promise<Blob>((resolve, reject) => {
    offscreen.toBlob((blob) => {
      if (!blob) {
        reject(new Error(`Failed to convert canvas to ${format} blob`));
        return;
      }
      const objectUrl = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = objectUrl;
      link.download = filename;
      document.body.appendChild(link);
      link.click();

      setTimeout(() => {
        document.body.removeChild(link);
        URL.revokeObjectURL(objectUrl);
      }, 150);

      resolve(blob);
    }, format, 1.0);
  });
}

import React, { useRef } from 'react';
import { exportCanvasLossless } from '../utils/canvasExporter';

export const TelemetryChart: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  const handleExport = async () => {
    if (!canvasRef.current) return;
    try {
      await exportCanvasLossless(canvasRef.current, {
        scaleFactor: 3,
        filename: `telemetry-render-${Date.now()}.webp`,
        format: 'image/webp'
      });
    } catch (err) {
      console.error('Export failed:', err);
    }
  };

  return (
    <div className="relative p-4">
      <canvas ref={canvasRef} width={800} height={400} className="border" />
      <button
        onClick={handleExport}
        className="mt-2 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
      >
        Export Canvas to Lossless WebP
      </button>
    </div>
  );
};

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { exportCanvasLossless } from '../src/utils/canvasExporter';

describe('canvas-webp-lossless-exporter verification', () => {
  beforeEach(() => {
    vi.restoreAllMocks();
  });

  it('triggers download and revokes object URL cleanly', async () => {
    const mockBlob = new Blob(['mock-data'], { type: 'image/webp' });
    const fakeCanvas = document.createElement('canvas');
    fakeCanvas.width = 100;
    fakeCanvas.height = 100;

    vi.spyOn(fakeCanvas, 'getContext').mockReturnValue({
      imageSmoothingEnabled: false,
      imageSmoothingQuality: 'low',
      scale: vi.fn(),
      drawImage: vi.fn()
    } as unknown as CanvasRenderingContext2D);

    HTMLCanvasElement.prototype.toBlob = vi.fn((callback, mime, quality) => {
      expect(mime).toBe('image/webp');
      expect(quality).toBe(1.0);
      callback(mockBlob);
    });

    const createSpy = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:test');
    const revokeSpy = vi.spyOn(URL, 'revokeObjectURL').mockReturnValue();

    await exportCanvasLossless(fakeCanvas, { filename: 'test.webp' });

    expect(createSpy).toHaveBeenCalledWith(mockBlob);
    await new Promise((r) => setTimeout(r, 200));
    expect(revokeSpy).toHaveBeenCalledWith('blob:test');
  });
});