Adding Page Numbers to PDFs with Canvas Tool

Page numbers matter.

Adding page numbers to PDFs? Sounds mundane. But here’s the kicker—this browser-side canvas tool turns it into a drag-and-drop delight, no servers involved. Skeptical? You should be. Most PDF tricks reek of 90s shareware vibes. This one? Feels fresh, almost cheeky in its simplicity.

Look, traditional tools suck. Upload your thesis to some shady server? Privacy nightmare. Fire up Adobe Acrobat for a “quick” tweak? Hours lost to menus from hell. And those predefined spots? They butcher your layout like a drunk butcher. This approach—visual canvas positioning—flips the script.

Browser-side visual positioning solves these issues: - Documents stay on your device - Intuitive click-and-drag interface - Precise visual placement - Works offline after loading

Spot on. From the original pitch, anyway. But does it deliver? Let’s poke.

Why Canvas for PDF Drudgery?

Canvas. That HTML5 workhorse everyone ignores post-SVG hype. Here, it renders your PDF page static underneath, then overlays a drawing layer for your mouse scribbles. Two canvases—bottom for preview, top for interaction. Smart. Prevents redrawing the whole PDF on every twitch. Genius separation.

And normalized coords? x:0-1, y:0-1. PDFs come in all flavors—A4, letter, whatever. This scales like a dream. No pixel-pegged disasters when pages resize.

But wait—React hooks galore. usePdflib for PDF.js magic under the hood. Next.js for the polish. It’s a dev’s playground. Drop a PDF, click-drag your number box, hit process. Boom—downloaded with numbers stamped precisely.

Is This Actually Better Than the Big Boys?

Adobe laughs last, usually. Their empire built on PDF lock-in. But client-side? PDF.js has lurked since 2009, Mozilla’s gift to the web. Remember when browsers choked on PDFs? Plugins everywhere, security holes galore. This tool? Echoes that rebellion—pure JS, no plugins.

Unique twist: It’s not just numbering. Predict this sparks a wave of visual PDF editors in browsers. Why? Mobile devs crave it. No app stores, instant PWAs. Imagine tweaking reports on your phone—drag, done. Adobe’s desktop stranglehold? Cracking.

Corporate spin check: None here. Open-source vibes, code snippets free. No “revolutionary” BS. Just works.

Here’s the code nugget that sings:

export type Rect = {
  x: number; // Normalized X position (0-1)
  y: number; // Normalized Y position (0-1)
  width: number; // Normalized width (0-1)
  height: number; // Normalized height (0-1)
};

Normalized brilliance. Handles any page size without sweat.

The Guts: Mouse Mayhem to PDF Points

Mouse down: Capture startX, startY. isDrawing flips true. Current rect born—width zero, height zilch.

Mousemove? Update width, height from drag. Clear canvas, redraw saved rects, dash the live one. Smooth, no lag.

Mouse up: Size check—bigger than 5px? Normalize (divide by canvas dims), shove to array. Done.

node.addEventListener("mousedown", (e) => {
  const rect = node.getBoundingClientRect();
  drawState.current = {
    startX: e.clientX - rect.left,
    startY: e.clientY - rect.top,
    isDrawing: true,
    currentRect: { ... },
    rectangles: rectangles,
  };
});

Raw event listeners. Old-school web, React-wrapped. Efficient. No bloated state updates per pixel.

Then pagenumber(files[0], rect). PDF.js stamps text at those coords, spits blob. autoDownloadBlob zips it out. Offline? Yep, post-load.

Flaws? Single file only, from code. Multi-page? Numbers every page, I bet. UI screams single-doc. Edge case: rotated PDFs? Normalized might wobble. Test it.

Devs, Build On This

Next-intl for i18n. SEO metadata per locale. Pro touches. Hooks like usePdflib abstract PDF.js boilerplate—pdf-lib? Wait, lib name tease.

Hook peek:

const { pagenumber } = usePdflib();

Abstraction gold. Want watermarks next? Extend.

Skeptic’s take: Won’t dethrone Acrobat for pros. But for devs scripting reports? Gold. Indie hackers shipping SaaS? Embed this, charge per PDF. Privacy sells.

Historical nod: Like ImageMagick’s web ports in early 2010s—client-side image edits blew minds. PDFs next. Bold call—this hits 1M uses in a year if open-sourced wide.

Privacy Win or Gimmick?

Stays local. No AWS bills for you—or them. Desktop alternatives? Electron bloat. This? Lightweight, vanilla browser.

But—PDF.js ain’t tiny. 2MB+ gzipped. First load chugs on 3G. Cache it, fine.

And drawing? Feels like PowerPoint 95. Clicky, forgiving. Min size prevents oopsies.

Wrapping the Critique

Not perfect. UI sparse—instructions text-only. Add undo? Snap to grid? Polish bait.

Still, elevates tedium. Page numbers—boring no more. Build it. Tweak it. Ship it.

🧬 Related Insights

• Read more: Your Scraper Hit 187 Pages — Then Robots.txt Woke Up Mad
• Read more: Ditch Repo Hell: This Next.js + NestJS Monorepo Boilerplate Actually Scales

Frequently Asked Questions

What is the best browser tool for adding page numbers to PDFs?

This canvas-based one: drag positions visually, processes offline with PDF.js. Beats servers.

How to add page numbers to PDF without software?

Upload nowhere—use this React canvas demo. Select rect, download stamped PDF.

Does canvas work for PDF editing in browser?

Yes, for positioning overlays like numbers. Normalized coords handle any page size.