How to Build a Browser-Based PDF Blur Tool Using JavaScript

Many PDF documents contain information that should not be shared publicly. Personal details, financial figures, signatures, addresses, account numbers, employee information, and confidential business data often need to be hidden before a file is shared with someone else.

A PDF Blur Tool makes this process simple. Instead of permanently removing content, it applies a blur effect over selected areas of a PDF, making sensitive information difficult to read while keeping the rest of the document unchanged.

In this tutorial, you will build a browser-based PDF Blur Tool using JavaScript. Users will be able to upload a PDF, preview every page, draw blur boxes over sensitive content, adjust the blur intensity, apply the effect to selected pages, preview the final result, and download the processed PDF—all without uploading files to a server.

We will use PDF.js to render PDF pages inside the browser, HTML Canvas to create and manage blur regions, and PDF-lib to generate the final blurred PDF.

By the end of this tutorial, you will have a fully functional client-side PDF editing tool, similar to the one available on my site, AllInOneTools.

Table of Contents

1. What This PDF Blur Tool Does and How It Works
2. Project Setup
3. Creating the HTML Layout
4. Uploading and Previewing PDFs
5. Drawing Blur Regions on Canvas
6. Adjusting Blur Intensity
7. Applying the Blur Effect
8. Previewing the Result
9. Downloading the Blurred PDF
10. Putting It All Together



What This PDF Blur Tool Does and How It Works




This tool runs entirely in the browser. It:

• Loads a PDF file using PDF.js
• Renders each page onto an HTML Canvas for interactive editing
• Lets users draw rectangles over areas to blur
• Applies a Gaussian blur (via CSS or Canvas filter) to the selected regions
• Uses PDF-lib to embed the blurred regions into a new PDF
• Enables downloading the final file without any server-side processing



This approach ensures privacy and speed since no data leaves the user's device.




Project Setup




To get started, create a new project folder and add an index.html file. You will also need to include the following libraries via CDN (or install them via npm if using a build tool):



• PDF.js – for rendering PDF pages
• PDF-lib – for generating the output PDF



In 2026, these libraries remain the standard for client-side PDF manipulation. Ensure you use the latest stable versions for optimal performance and security.




Creating the HTML Layout




Build a clean interface with the following sections:

• File upload button for selecting a PDF
• Page navigation (previous/next)
• Canvas area for displaying and editing the current page
• Blur intensity slider (range 1–20)
• Apply and download buttons



Keep the layout responsive to work on both desktop and tablet devices.




Uploading and Previewing PDFs




Use HTML to let users select a file. On selection:

1. Read the file as an ArrayBuffer
2. Load it using pdfjsLib.getDocument()
3. Render the first page onto a Canvas using page.render()
4. Store page dimensions for accurate blur placement



Drawing Blur Regions on Canvas




Enable mouse or touch events on the Canvas to let users draw rectangles. Track:

• Start coordinates (mousedown or touchstart)
• End coordinates (mouseup or touchend)



Store each rectangle as an object with { x, y, width, height, pageNumber }. Optionally allow users to delete or resize drawn regions.




Adjusting Blur Intensity




Add a slider that controls the filter: blur(px) value applied to the Canvas context when rendering the blur effect. A value between 5 and 15 pixels works well for most use cases.




Applying the Blur Effect




When the user clicks "Apply":

1. Temporarily clear the Canvas
2. Redraw the original PDF page
3. For each blur region on the current page, use ctx.filter = 'blur(10px)' (or the intensity from the slider)
4. Draw a filled rectangle over the sensitive area
5. Reset the filter to avoid affecting subsequent draws



Previewing the Result




After applying the blur, the Canvas now shows the blurred page. Allow users to navigate other pages to verify the changes. Provide a "Reset" button to revert all blur regions on a page.




Downloading the Blurred PDF




To generate the final PDF:

1. Use PDF-lib's PDFDocument.load() with the original file
2. For each page, embed the blurred Canvas image as a new page or overlay
3. Save the modified PDF and trigger a download using URL.createObjectURL() into an element



This method preserves the original PDF structure while adding visual blur effects.




Putting It All Together




Combine all components into a single-page application. Test with various PDFs (text-heavy, image-heavy, multi-page) to ensure performance and accuracy. In 2026, modern browsers handle Canvas and Web Workers efficiently, even for large documents.




By following this tutorial, you now have a powerful, privacy-focused PDF blur tool that runs entirely in the browser. You can extend it further by adding undo/redo, saving blur regions as annotations, or supporting batch processing.

via FreeCodeCamp