What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If a PDF shows white behind an image that should be transparent, the white pixels were usually added before jsPDF placed the image—during HTML or canvas rendering. Changing the image’s x/y position or page margins cannot make already-opaque pixels transparent. Render the source with transparency where appropriate, inspect its CSS for backgrounds, and place it inside a calculated content rectangle. For multi-page output, paginate deliberately rather than assuming that margins will be applied automatically.
Why white appears behind a supposedly transparent image
There are two different situations that can look the same in a PDF:
- The image itself contains opaque white pixels. A PNG file can support transparency, but a particular PNG may still have a white background. Once those pixels are part of the image, jsPDF has no information that identifies them as removable background.
- The HTML-to-canvas rendering paints white behind the content. This can happen before
addImage()is called. A reported jsPDF issue involvinghtml()described div containers being rendered with white backgrounds, which obscured a background image later added to the PDF.
Margins are a separate concern. They determine where an image is placed and how much page area it can occupy; they do not alter the pixels in the image. Diagnose the rendering stage first, then solve placement and pagination.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCheck the source before changing the PDF
Open the original PNG in an image viewer that displays transparency as a checkerboard, or inspect its alpha channel in an image editor. If the background is white there too, changing jsPDF settings will not recover transparency that the source does not contain. If the source is transparent but the captured canvas is white, inspect the HTML and capture options.
#1 Best Overall
- PORTABLE SCANNER FOR USE ON-THE-GO — The fastest and lightest mobile single-sheet-fed compact document scanner in its class¹
- QUICK DOCUMENT SCANNING ― This Epson ultra-fast scanner scans a single page as quickly as 5.5 seconds²; Windows and Mac compatible
- VERSATILE PAPER HANDLING ― Portable scanner scans documents up to 8.5 x 72 in; Also easily digitizes receipts and ID cards to make accounting, bookkeeping, and organizing simpler
- INTUITIVE, HIGH-SPEED SOFTWARE — Epson ScanSmart Software³ is a smart tool allowing you to easily scan, review, and save; Stay organized easily with the help of this Epson scanner
- EASY SETUP — USB-powered connect to your computer for quick and simple scanning; No batteries or external power supply required to operate portable document scanner; Standard Connectivity: USB 2.0
Check CSS and generated content
Look beyond the outer page element. A white background or background-color on a child container, a pseudo-element such as ::before or ::after, or a nested component can paint opaque pixels into the capture. The resulting canvas can have a transparent outer background and still contain white rectangles where those elements were drawn.
Preserve transparency when rendering HTML to a canvas
When using html2canvas, backgroundColor: null is a practical setting to request a transparent canvas background. One reported jsPDF issue used that option and then converted the result to a PNG data URL with canvas.toDataURL("image/png"). It is a useful starting point, not a guarantee that every pixel will remain transparent: CSS backgrounds, pseudo-elements, and browser rendering can still add opaque pixels.
html2canvas(element, { backgroundColor: null }).then((canvas) => {
const png = canvas.toDataURL("image/png");
// Pass png to jsPDF after calculating the page placement.
});Use PNG when the output must retain an alpha channel. JPEG does not preserve transparency, so converting a transparent canvas to JPEG necessarily gives the background a color. If the canvas still looks white, inspect the canvas itself—not only the PDF—before changing jsPDF coordinates.
When a white page is intentional
A transparent image placed on a white PDF page will appear white wherever it has no pixels. That is normal: transparency means the page beneath it shows through. If the page is white, the visible result is white; if the page has a colored background, that color shows through instead. To make a transparent region reveal another image, place that image beneath the transparent image in the PDF, and ensure the upper image actually retains alpha.
Rank #2
- FAST SPEEDS - Scans color and black and white documents a blazing speed up to 16ppm (1). Color scanning won’t slow you down as the color scan speed is the same as the black and white scan speed.
- ULTRA COMPACT – At less than 1 foot in length and only about 1. 5lbs in weight you can fit this device virtually anywhere (a bag, a purse, even a pocket).
- READY WHENEVER YOU ARE – The DS-640 mobile scanner is powered via an included micro USB 3. 0 cable allowing you to use it even where there is no outlet available. Plug it into you PC or laptop and you are ready to scan.
- WORKS YOUR WAY – Use the Brother free iPrint&Scan desktop app for scanning to multiple “Scan-to” destinations like PC, Network, cloud services, Email and OCR. (2) Supports Windows, Mac and Linux and TWAIN/WIA for PC/ICA for Mac/SANE drivers. (3)
- OPTIMIZE IMAGES AND TEXT – Automatic color detection/adjustment, image rotation (PC only), bleed through prevention/background removal, text enhancement, color drop to enhance scans. Software suite includes document management and OCR software. (4)
Calculate margins and scale the image proportionally
jsPDF’s addImage accepts a data URL, image element, canvas, byte array, or RGBA data. Its x and y coordinates are measured from the page’s left and upper edges. Width and height use the units declared when creating the document, such as millimeters. The documented call shape is addImage(imageData, format, x, y, width, height, alias, compression, rotation).
For a fixed margin on the left and right, subtract both margins from the page width to obtain the available image width. Scale height by the same ratio as width so the image keeps its aspect ratio:
const contentWidth = pageWidth - marginLeft - marginRight;
const imageHeight = canvas.height * contentWidth / canvas.width;This calculation fits the full image to the available width. It does not automatically fit a tall image onto one page, nor does it create top and bottom margins on subsequent pages. Those require a pagination decision.
Complete example: render, add margins, and paginate
The following is a template for rasterizing an element, preserving a transparent canvas background where possible, and placing the same scaled image across pages with top and bottom offsets. It follows the height-counter approach shown in an issue report. The loop is not a universal clipping solution: it places an oversized image at different y coordinates, so inspect the resulting page boundaries in the PDF viewers relevant to your users.
Rank #3
- FAST DOCUMENT SCANNING — Document scanner with feeder allows you to speed through stacks with a 50-sheet Auto Document Feeder (ADF); Efficient office scanner to help you scan more productively
- INTUITIVE, HIGH-SPEED SOFTWARE — Quickly scan with this desktop document scanner; Epson ScanSmart Software lets you easily preview scans, email files, upload to the cloud, and more; Plus, automatic file naming saves even more time
- SEAMLESS INTEGRATION — Easily incorporate your data into most document management software with the included TWAIN driver; Office document scanner integrates seamlessly with business workflows
- EASY SHARING — Duplex scanner allows you to scan straight to email or popular cloud storage2 services like Dropbox, Evernote, Google Drive, and OneDrive for simple storage and sharing
- SIMPLE FILE MANAGEMENT — Scanner allows the creation of searchable PDFs with Optical Character Recognition (OCR) and convert scans to editable Word or Excel files effortlessly; Designed for home and office document scanning
async function exportElementToPdf(element) {
const canvas = await html2canvas(element, { backgroundColor: null });
if (!canvas.width || !canvas.height) {
throw new Error("The rendered canvas has no dimensions.");
}
const pdf = new jsPDF({ orientation: "p", unit: "mm", format: "a4" });
const marginX = 12;
const marginTop = 15;
const marginBottom = 15;
const pageWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const contentWidth = pageWidth - marginX * 2;
const usableHeight = pageHeight - marginTop - marginBottom;
if (contentWidth <= 0 || usableHeight <= 0) {
throw new Error("Margins leave no usable page area.");
}
const imageHeight = canvas.height * contentWidth / canvas.width;
const png = canvas.toDataURL("image/png");
let remaining = imageHeight;
let consumed = 0;
let page = 0;
while (remaining > 0) {
if (page > 0) pdf.addPage();
const y = marginTop - consumed;
// Unique aliases avoid accidental image-resource reuse across placements.
pdf.addImage(png, "PNG", marginX, y, contentWidth, imageHeight,
`rendered-page-image-${page + 1}`);
consumed += usableHeight;
remaining -= usableHeight;
page += 1;
}
pdf.save("output.pdf");
}The code uses millimeters because the document declares unit: "mm". Change the margin values in the same unit if you change the document unit. It also checks for zero-sized canvases and margins that leave no usable area, rather than passing invalid dimensions onward.
Understand the pagination math
The image is scaled once to the content width. Each page can show a vertical window of usableHeight = pageHeight - marginTop - marginBottom. The first placement begins at the top margin; each later placement shifts upward by the height already consumed, keeping the next slice within the same page content band. Margins are coordinates and available space, not a command to jsPDF to split an image.
For precise clipping, especially when page boundaries must not show content outside the intended slice, render or crop a separate canvas slice for each page and add each slice at the top margin. That approach gives you explicit page-sized content, at the cost of more rendering and bookkeeping. If users need selectable text or crisp text at arbitrary zoom, rasterizing the whole HTML element into an image is the wrong output model; create PDF text and vector elements directly instead.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose between one oversized image and per-page slices
| Approach | How it works | Trade-off |
|---|---|---|
| One scaled image reused across pages | Scale to the content width, then shift the image upward by each page’s consumed height. | Simple to implement; verify clipping and page edges in target viewers. |
| Separate slice per page | Crop each visible vertical region and place it at the page’s top margin. | More control over page boundaries, with extra crop and placement logic. |
| Native PDF text and shapes | Build the document from PDF text and vector content rather than a canvas raster. | Supports selectable text and avoids treating the whole page as one bitmap; requires a different rendering approach. |
Prevent image overwrites when adding multiple PNGs
If one image seems to replace another after multiple addImage() calls, check whether the images are being reused or identified ambiguously. A reported issue described one PNG overwriting another, and the addImage API includes an alias parameter. Give distinct image resources distinct aliases when adding multiple images, and confirm that each data URL or canvas contains the expected image before embedding it.
Rank #4
- Scanner type: Document
- Connectivity technology: USB
- With Auto Scan Mode, the scanner automatically detects what you're scanning
- Digitize documents and images
An alias is a resource-identification aid, not a transparency fix. It cannot restore alpha lost during rendering or make a white-filled canvas transparent. Keep the two investigations separate: inspect pixels for the background problem and inspect resource identities for replacement or reuse problems.
Troubleshoot common white-background and margin problems
- The whole captured element is white. Check the computed styles of the target and descendants for backgrounds, including pseudo-elements. Set
backgroundColor: nullfor html2canvas where appropriate, then inspect the canvas before encoding it. - The PNG looks transparent but the PDF area is white. A transparent image reveals the PDF page below it. If that page is white, the apparent background is expected. Put the desired background underneath the PNG if you want it to show through.
- Only a child panel is white. The opacity may be coming from that child’s CSS rather than the canvas background option. Remove or override the child background in the captured layout, including generated pseudo-elements.
- The image crosses the bottom margin. Confirm that the per-page usable height subtracts both top and bottom margins. A single tall image will not honor a bottom margin on later pages unless the pagination offsets or crop regions account for it.
- The image is stretched or distorted. Compute height using the same scale ratio as width:
canvas.height * contentWidth / canvas.width. Do not independently set an unrelated width and height unless distortion is intended. - The PDF has a blank page or no visible image. Check that the canvas has nonzero dimensions, that the source element rendered successfully, and that
contentWidthand usable page height are positive. Verify the PNG data and the image placement coordinates. - Images appear to replace one another. Use distinct aliases for distinct resources and verify each input image before calling
addImage(). - The result differs across PDF viewers. The reported examples are issue-specific, not a guarantee for all jsPDF/html2canvas versions or viewers. Check the versions in the project and validate output in the viewers your users actually use.
Performance, fidelity, and reliability trade-offs
A full-element canvas capture turns the rendered content into raster imagery. A large or long page can therefore mean a large canvas and PDF image, while text in that capture is not native selectable PDF text. Per-page slices can improve control over margins and clipping, but require deciding how each page’s source region maps to the page. Direct PDF construction is more suitable when text selection or vector sharpness is important.
There is no benchmark established here for capture time, maximum safe canvas size, or PDF size; those depend on the content, browser, libraries, and runtime. Test with representative long pages and high-resolution assets in the actual deployment environment. Recheck jsPDF and html2canvas behavior against the versions your application uses, especially when relying on transparent rendering or repeated image-resource handling.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteOr skip the browser setup
If your actual job is capturing a website as an image or PDF, rather than building a custom paginated document from an HTML element, ScreenshotNeo offers a website screenshot API and MCP server. It does not replace jsPDF’s custom layout and pagination logic; it is an alternative for requesting a page capture.
Best Value
- OUR MOST ADVANCED SCANSNAP. Large touchscreen, fast 45ppm double-sided scanning, 100-sheet document feeder, Wi-Fi and USB connectivity, automatic optimizations, and support for cloud services. Upgraded replacement for the discontinued iX1600
- CUSTOMIZABLE. SHARABLE. Select personalized profiles from the touchscreen. Send to PC, Mac, mobile devices, and clouds. QUICK MENU lets you quickly scan-drag-drop to your favorite computer apps
- STABLE WIRELESS OR USB CONNECTION. Built-in Wi-Fi 6 for the fastest and most secure scanning. Connect to smart devices or cloud services without a computer. USB-C connection also available
- PHOTO AND DOCUMENT ORGANIZATION MADE EFFORTLESS. Easily manage, edit, and use scanned data from documents, receipts, photos, and business cards. Automatically optimize, name, and sort files
- AVOIDS PAPER JAMS AND DAMAGE. Features a brake roller system to feed paper smoothly, a multi-feed sensor that detects pages stuck together, and skew detection to prevent paper damage and data loss
For an image response, a one-call cURL example is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for API details. The service accepts cookie/consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses report the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month without a card.
Frequently Asked Questions
Does setting jsPDF margins make the page background transparent?
No. Margins control placement and available page area. Transparency depends on the image and how it was rendered.
Can jsPDF remove white pixels from a PNG automatically?
The documented addImage inputs place image data; they do not identify white pixels as a background to remove. Preserve alpha during rendering or edit the source image.
Will ScreenshotNeo create a custom multi-page PDF layout?
It provides website capture and a capture_pdf MCP tool; the supplied product facts do not establish custom jsPDF-style margin and pagination controls.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
