WebAssembly Vector Rendering: How Browsers Draw Complex PDF Pages Locally

When you open a PDF in your browser, what you see is not a static image, but a dynamic canvas assembled page by page. A PDF page is essentially a collection of drawing commands: 'move to point X, Y; draw a line to W, Z; select Helvetica font; write characters.' In early browsers, rendering these complex vector paths required heavy plugin binaries. Today, browsers coordinate JavaScript rendering workers (using engines like PDF.js) and WebAssembly modules to parse the binary streams and draw the shapes onto HTML5 `<canvas>` elements.

The rendering pipeline operates in multiple phases. First, a worker thread reads the binary page stream and decodes the Compressed Object Streams. Next, it interprets the layout directives and builds a tree of vector operations. Finally, it calls Canvas 2D API contexts (`ctx.lineTo`, `ctx.fillText`, `ctx.drawImage`) or compiles WebGL shaders to draw the visual elements onto the screen. This must occur at 60 frames per second to ensure smooth scrolling and zooming.

To support smooth zooming, the renderer dynamically re-renders pages at different scale factors. For example, if you zoom to 200%, the canvas size is doubled and the vector drawing pipeline is re-executed at the higher resolution. This avoids pixelation and preserves sharp text rendering. By leveraging WebAssembly for the heavy binary parsing and standard Canvas APIs for the painting, browsers achieve desktop-grade rendering speeds with native security.