browser-pdf-canvas-skilllisted

# Browser PDF Canvas Engine Skill Web architectural pattern for embedding large technical documents (50-150 page boardview schematics) without relying on browser native iframes that restrict DOM interaction and event handling. --- ## 1. Native Iframe Limitations - Native `<iframe>` PDF viewers execute within isolated browser sandboxes. Mouse events (dragging, panning, precise selection, wheel zoom) are captured internally and hidden from parent JavaScript. - Native `Ctrl+F` searches the entire browser DOM (including navigation menus, sidebars, and AI chat panels) rather than restricting queries to technical schematic text. --- ## 2. Virtualized Lazy Rendering via HTML5 Canvas Rendering all pages of a 100+ page schematic concurrently crashes browser tabs. Use virtualized viewport observers: ```javascript // 1. Create lightweight empty placeholder div preserving document scroll geometry const placeholder = document.createElement('div'); placeholder.className = 'pdf-page-container relative'; placeholder.dataset.pageNum = pageNum; placeholder.style.minHeight = `${estimatedHeight}px`; // 2. Attach IntersectionObserver for viewport-driven rendering const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { const pageNumber = parseInt(entry.target.dataset.pageNum, 10); if (entry.isIntersecting) { renderPageCanvas(pageNumber, entry.target); } else { // Purge non-visible canvas to conserve system memory cleanupPageCan