feat(engine): enable CanvasDrawElement in renderer Chrome args

Cherry-picked from feat/html-in-canvas-launch (PR #611):

- Enable --enable-features=CanvasDrawElement in Chrome browser args
  so HTML-in-canvas compositions render correctly
- Add native drawElementImage() capture path for shader transitions
  with existing fallback preserved
- Reuse renderer Chrome args in hyperframes validate for consistent
  WebGL/CanvasDrawElement environment
- Add capture.test.ts for the new shader transition capture path

packages/cli/src/commands/validate.ts

@@ -162,18 +162,22 @@ async function validateInBrowser(
   const errors: ConsoleEntry[] = [];
   const warnings: ConsoleEntry[] = [];
   let contrast: ContrastEntry[] | undefined;
+  const viewport = resolveCompositionViewportFromHtml(html);
 
   try {
     const browser = await ensureBrowser();
     const puppeteer = await import("puppeteer-core");
+    const { buildChromeArgs } = await import("@hyperframes/engine");
+    const browserGpuMode =
+      process.env.PRODUCER_BROWSER_GPU_MODE === "software" ? "software" : "hardware";
     const chromeBrowser = await puppeteer.default.launch({
       headless: true,
       executablePath: browser.executablePath,
-      args: ["--no-sandbox", "--disable-gpu", "--disable-dev-shm-usage"],
+      args: buildChromeArgs({ ...viewport, captureMode: "screenshot" }, { browserGpuMode }),
     });
 
     const page = await chromeBrowser.newPage();
-    await page.setViewport(resolveCompositionViewportFromHtml(html));
+    await page.setViewport(viewport);
 
     page.on("console", (msg) => {
       const type = msg.type();