Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Fabric.js does not document a native PDF export. The dependable browser workflow is to export the canvas as a PNG with toDataURL(), place that image on a jsPDF page, and save the PDF. This preserves what the user sees, while giving you explicit control over page size, orientation, margins and output resolution.
The recommended conversion pipeline
Fabric.js officially documents image, JSON and SVG export; its reviewed API and guide pages do not document a direct PDF method. JSON stores canvas state, not a PDF, and SVG is a separate vector export whose rendering is not guaranteed to match Canvas for every object and effect.
- Finish rendering the Fabric canvas, including any fonts or images.
- Call
canvas.toDataURL({ format: 'png', multiplier: ... }). - Create a jsPDF document with the intended paper size and orientation.
- Measure the image and fit it inside the page without changing its aspect ratio.
- Add the image and call
pdf.save().
The example below follows the documented APIs. Confirm exact syntax and types against the Fabric.js and jsPDF versions installed in your project.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Complete browser example
import { jsPDF } from 'jspdf';
// fabricCanvas is your existing fabric.Canvas instance.
function downloadCanvasPdf(fabricCanvas) {
// Increase multiplier only as far as your print size and memory budget require.
const imageData = fabricCanvas.toDataURL({
format: 'png',
multiplier: 2
});
const pdf = new jsPDF({
orientation: 'landscape',
unit: 'pt',
format: 'a4'
});
const pageWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const image = new Image();
image.onload = () => {
const scale = Math.min(pageWidth / image.width, pageHeight / image.height);
const width = image.width * scale;
const height = image.height * scale;
const x = (pageWidth - width) / 2;
const y = (pageHeight - height) / 2;
pdf.addImage(imageData, 'PNG', x, y, width, height);
pdf.save('canvas.pdf');
};
image.onerror = () => {
throw new Error('The exported canvas image could not be decoded.');
};
image.src = imageData;
}
// Example: downloadCanvasPdf(canvas);In a bundler project, install and import jsPDF with import { jsPDF } from 'jspdf';. In a script-tag setup, use the global exposed by the jsPDF build you selected. The jsPDF declarations also allow an HTMLCanvasElement as an addImage source in supported builds, which can avoid an image decode step; check the installed build and TypeScript declarations before relying on that overload.
#1 Best Overall
Choose page geometry before exporting
Orientation and paper
Use orientation: 'portrait' or 'landscape' and a named format such as 'a4', or provide your own dimensions. The page dimensions returned by pdf.internal.pageSize are in the unit you selected. Calculate placement from those values rather than assuming a fixed pixel size.
Margins and crop
For a margin, subtract twice the margin from the usable width and height, then center the fitted image in that rectangle:
const margin = 36; // points
const usableWidth = pageWidth - margin * 2;
const usableHeight = pageHeight - margin * 2;
const scale = Math.min(usableWidth / image.width, usableHeight / image.height);
const width = image.width * scale;
const height = image.height * scale;
pdf.addImage(imageData, 'PNG',
(pageWidth - width) / 2,
(pageHeight - height) / 2,
width,
height
);If only part of the Fabric canvas belongs in the PDF, use the crop options documented by Fabric’s toDataURL() API (crop left/top and crop width/height) before fitting the result. Cropping at export time avoids adding an oversized, mostly empty bitmap to the PDF.
Recommended Free Tools
Never stretch the artwork
Do not pass unrelated width and height values merely to fill the page. The single scale value in the example preserves the canvas aspect ratio. If the canvas and page ratios differ, the result will have letterboxing on two sides; intentionally cropping is preferable to distortion.
Keeping the PDF sharp
Understand the raster trade-off
The PNG route puts a raster image in the PDF. At a given physical size, too few source pixels produce softness when printed or zoomed. Fabric’s multiplier scales the exported bitmap; raising it can improve detail but increases memory use, encoding time and file size. There is no universally correct value. Choose it from the intended print dimensions and inspect the actual PDF at that size.
Use SVG only when you can verify it
Fabric documents SVG export and describes SVG as suitable for import into other software or printing. However, SVG and Canvas are not identical, and export/import behavior is not one-to-one. jsPDF declarations list an SVG plugin and addSvgAsImage, but that declaration alone does not prove that the resulting PDF contains editable vector paths.
Prototype an SVG route when scalable artwork is essential, and test your real objects: text and fonts, filters, patterns, clipping, rotations, groups and transforms. If exact visual fidelity to the live canvas matters more than editability, PNG is the conservative choice.
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 minuteFabric details that affect conversion
- Wait for assets: export only after remote images and fonts have loaded and the canvas has rendered its final state.
- Backgrounds and transparency: verify whether your design expects a transparent background or a solid page color. Inspect the PDF, because viewer and printer handling can differ.
- Cross-origin images: images loaded without suitable cross-origin permission can prevent a canvas from being read. Serve assets with appropriate CORS headers or use same-origin assets.
- Filters and clipping: compare the PNG and the canvas for shadows, filters, masks and clipping paths; browser and Fabric versions can affect the result.
- JSON is not PDF: serialization is useful for saving and restoring the visual state, but it does not describe a PDF page. Custom controls and handlers are application code rather than serialized canvas content.
Multi-page and large-canvas strategies
A single canvas export produces one image. For a long design, decide whether the document should be one scaled page or several pages. For multiple pages, crop horizontal or vertical regions with Fabric’s export options, add each crop with pdf.addPage(), and repeat the fit calculation for each page. Keep a consistent crop size and margin so page breaks are predictable.
Very large multipliers can exhaust browser memory before jsPDF writes the file. Prefer a page-sized export over an enormous full-resolution bitmap, export one page at a time, and release temporary image references after each page when processing many pages.
Troubleshooting
The PDF is blank
Confirm that the Fabric canvas has objects and that export runs after rendering and asset loading. Log the returned data URL prefix (it should begin with an image MIME type), attach the onerror handler shown above, and test the PNG separately by opening it in a new tab.
Images disappear or export throws a security error
This usually indicates a tainted canvas caused by cross-origin resources. Move assets to the same origin or configure the image server and Fabric image loading for permitted CORS access. A PDF library cannot recover pixels that the browser refuses to read.
The result is blurry
Increase multiplier gradually, check the physical size at which the image is placed, and avoid enlarging a low-resolution export. Compare file size and browser memory while testing; a higher multiplier is not automatically better for every design.
Objects look different from the canvas
Check fonts, filters, patterns, clipping, transparency and transforms in the actual browser. Verify that the Fabric and jsPDF versions match their current documentation. SVG may help with scalability, but it must be validated against the specific objects and effects in your application.
TypeScript rejects addImage
Use the overload accepted by your installed jsPDF declarations: a data URL string is broadly supported, while direct HTMLCanvasElement input depends on the build and version. Pin versions and consult the matching API declarations rather than the moving documentation for another release.
Performance, reliability and file-size checks
- Export only when the user requests a download, not on every canvas change.
- Pick the smallest multiplier that meets the target print or display size.
- Keep page dimensions in points or another deliberate unit and calculate placement from the live PDF page size.
- Test Chrome, Firefox and Safari versions that your application supports, especially when using modern browser APIs required by jsPDF features.
- Open the saved PDF in more than one viewer and print a representative page if physical output matters.
Or skip the browser setup
If the Fabric canvas is already rendered on a publicly reachable page and you need a captured page or PDF rather than a programmable Fabric object export, ScreenshotNeo can handle the browser session through one request. It is not a replacement for the JavaScript pipeline when you need to manipulate canvas data, but it can be useful for a hosted result page.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/fabric-canvas -o canvas.webpSee the ScreenshotNeo API documentation for output and PDF parameters. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Other client examples for ScreenshotNeo
Python
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/fabric-canvas"}, timeout=90)
open("canvas.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/fabric-canvas' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Can Fabric.js export to PDF?
The reviewed Fabric.js documentation does not describe a native PDF export. Export PNG or SVG first, then use a PDF library or another renderer.
Is the PNG inside the PDF editable?
No. It is raster artwork. Editable vector content requires a separately validated SVG or vector-PDF workflow and depends on the objects and effects in your design.
Why does my PDF have blank margins?
The fitting calculation preserves aspect ratio. If the canvas and paper have different proportions, unused space is expected. Crop deliberately or choose a page ratio closer to the canvas instead of stretching it.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Can I use JPEG instead of PNG?
Fabric’s export API supports JPEG as well as PNG. JPEG can reduce file size for photographic artwork, but it introduces lossy compression and does not preserve transparency.
Does Fabric JSON contain everything needed to recreate a PDF?
JSON can restore documented canvas state, but it is not a PDF representation and does not include application code such as custom controls and handlers.
Should I use SVG for a print shop?
Only after testing the exact Fabric objects, fonts, filters, patterns and clipping used by your application. SVG scalability is promising, but the documented APIs do not guarantee identical Canvas rendering or editable PDF paths.
The Bottom Line
For a reliable browser download, export the Fabric canvas to PNG, fit it proportionally on a deliberately sized jsPDF page, and tune the export multiplier for the final physical size. Treat SVG as a tested alternative when vector scalability is more important than guaranteed visual parity.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
