Most html2canvas text-shadow problems come from one of three variables: the capture scale, a font that was not ready, or a mismatch between the cloned DOM and the page you are looking at. html2canvas lists text-shadow as supported, but it rebuilds a canvas from DOM and style information rather than copying the browser’s native pixels. That means a supported declaration can still produce a visibly different blur, position, or glyph outline.
Use the workflow below: prove that the effect is really text-shadow, reduce it to one element, compare an explicit scale with the default device-pixel ratio, wait for fonts, and inspect the cloned document with onclone and logging. Record the exact html2canvas release and browser version before changing CSS or filing an issue.
First, separate text-shadow from the other shadow effects
Inspect the element in DevTools and identify the declaration that creates the pixels. html2canvas’s feature list marks text-shadow as supported and box-shadow as unsupported. They are not interchangeable.
- Text shadow: a shadow attached to glyphs, created by
text-shadow. - Box shadow: a shadow around an element’s rectangular box, created by
box-shadow. - Other compositing: CSS filters, pseudo-elements, masks, borders, and rounded corners can create edges that look like a shadow.
If the artifact follows a rounded card edge or appears outside the element’s box, troubleshoot that separate effect first. A historical report about a black border involving border-radius and box-shadow in html2canvas 1.4.1 does not establish a text-shadow defect or a universal current behavior.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Build a minimal reproduction before changing the design
Remove layout and effects until only one short text node remains. Keep the font family, size, weight, color, exact shadow declaration, viewport, browser, and html2canvas version fixed. Compare the browser’s display with the generated canvas and save both images.
import html2canvas from 'html2canvas';
const target = document.querySelector('#shadow-test');
const canvas = await html2canvas(target, {
scale: 1,
logging: true
});
document.body.appendChild(canvas);Use a deliberately small fixture so that a one-pixel change is easy to see:
<div id="shadow-test">
Shadow test
</div>
<style>
#shadow-test {
display: inline-block;
padding: 24px;
background: #fff;
color: #222;
font: 700 48px/1.1 "Your Web Font", sans-serif;
text-shadow: 3px 3px 6px rgba(0, 0, 0, .45);
}
</style>When reporting or comparing results, write down the html2canvas release, browser and operating-system versions, viewport dimensions, device-pixel ratio, requested scale, font-loading state, and console output. Do not infer a general bug from a reproduction that changes several of those variables at once.
Control scale and blur radius
The documented default for scale is window.devicePixelRatio. A project change record specifically addresses a text-shadow blur-radius mismatch related to scale. That history makes scale a controlled diagnostic variable; it does not prove that every current release fails at every device-pixel ratio.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Run an A/B scale test
- Capture the unchanged element with no
scaleoption. This uses the currentwindow.devicePixelRatio. - Capture again with
scale: 1, keeping the element, viewport, and font state identical. - If needed, test one additional explicit value such as
2. Record the actual number, not merely “high DPI.” - Compare the shadow’s offset and blur in CSS pixels and in output pixels. Check whether the glyph position changes as well.
const options = [
{},
{ scale: 1 },
{ scale: 2 }
];
for (const opts of options) {
const canvas = await html2canvas(target, {
...opts,
logging: true
});
console.log('capture options', opts, canvas.width, canvas.height);
document.body.appendChild(canvas);
}If only one scale produces the discrepancy, include that result in the bug report. Do not “fix” the image by adding an unexplained CSS offset; that can hide a scale interaction and break another display density.
Rank #2
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Wait for the intended web font
Fallback metrics can move glyphs and change the apparent shadow shape. An older report tested html2canvas 1.0.0-rc3 and attributed displaced or squashed text symptoms to fonts still downloading. It is a useful diagnostic hypothesis, not proof of a current defect.
Verify font readiness
Wait for the browser’s font set before calling html2canvas, then verify the computed family on the target:
await document.fonts.ready;
const target = document.querySelector('#shadow-test');
const styles = getComputedStyle(target);
console.log({
fontFamily: styles.fontFamily,
fontSize: styles.fontSize,
fontWeight: styles.fontWeight,
textShadow: styles.textShadow
});
const canvas = await html2canvas(target, { scale: 1, logging: true });If the result changes after a hard reload or when throttling the network, capture only after the font has loaded. Also check that the element itself is not being replaced by a framework render after your capture call.
Inspect the cloned document with onclone
html2canvas renders a cloned document. The onclone callback lets you inspect or adjust that copy without changing the live page. Use it to verify that the clone contains the expected class, text, and computed styles.
const canvas = await html2canvas(target, {
scale: 1,
logging: true,
onclone: (clonedDocument) => {
const cloneTarget = clonedDocument.querySelector('#shadow-test');
if (!cloneTarget) {
console.warn('Target is missing from the cloned document');
return;
}
const cloneStyles = clonedDocument.defaultView.getComputedStyle(cloneTarget);
console.log('clone text:', cloneTarget.textContent);
console.log('clone styles:', {
fontFamily: cloneStyles.fontFamily,
fontSize: cloneStyles.fontSize,
fontWeight: cloneStyles.fontWeight,
color: cloneStyles.color,
textShadow: cloneStyles.textShadow
});
}
});Do not use onclone to conceal a mismatch by permanently rewriting the design. A temporary diagnostic change is useful; once you know which variable matters, remove it and retest the original declaration.
Rank #3
Use the other capture options only when they explain the symptom
The configuration reference includes dimensions, viewport settings, image-loading controls, logging, onclone, and scale. Change one relevant option at a time.
| Symptom | First variable to test | Why |
|---|---|---|
| Blur width changes at different densities | scale |
The default follows window.devicePixelRatio, and project history records a blur-radius/scale fix. |
| Letters are squashed, shifted, or have a different shadow contour | Font readiness and computed font styles | Fallback metrics can alter glyph geometry before the intended font arrives. |
| The target looks correct in the page but not in the output | onclone, logging, and clone styles |
The renderer uses a DOM clone, not the live browser pixels. |
| Only a card edge or rounded corner is wrong | Check box-shadow, borders, radius, and filters |
That may not be a text-shadow issue; box-shadow is listed as unsupported. |
| Content is cut off or images are absent | Width, height, viewport, and image-loading settings | Those affect layout and resource availability, not the glyph-shadow algorithm itself. |
Understand the rendering difference
The project documentation describes html2canvas as taking “screenshots” of webpages or parts of them directly in the user’s browser. In practical terms, it reconstructs a representation from DOM and style information. The browser’s compositor and html2canvas therefore do not have to produce identical anti-aliasing, font rasterization, blur kernels, or subpixel placement.
Free tools Windows power users keep installed
One-click scans. No signup required.
For diagnosis, compare the two paths across three axes:
- Scale/device-pixel ratio: default versus explicit values.
- Font state: intended web font loaded versus fallback metrics.
- Versions: exact html2canvas release and browser version.
There is no established browser ranking or universally correct scale for text shadows in the available project material. Choose the setting that matches your output requirement, document it, and test it in the browsers you support.
Common failures and precise fixes
“The shadow blur does not match the page at scale 2”
Repeat the same capture at scale: 1 and at the default. If the mismatch tracks the scale, preserve the reproduction with the exact numeric value and html2canvas release. Avoid compensating with a different CSS blur until you know whether the output or the design is the source of the difference.
“The font is in the wrong position or looks compressed”
Wait for document.fonts.ready, inspect font-family, font-size, and font-weight in both the live target and the clone, then capture again. If the font was already ready and the clone matches, test a minimal fixture to separate layout effects from glyph rendering.
“The shadow is missing completely”
Confirm that the computed declaration is text-shadow, not a filter or pseudo-element. Check that the target is not hidden, clipped, or replaced in the clone. Enable logging and inspect the cloned node with onclone. A missing box shadow is a different case because that property is listed as unsupported.
“The canvas has a black outline around a rounded component”
Remove box-shadow, border, and radius one at a time. Do not classify this as a text-shadow bug solely because it appears near text. The historical 1.4.1 report about this combination is issue context, not evidence that all current versions behave the same way.
“It works locally but fails in a report or test runner”
Compare browser version, device-pixel ratio, font availability, viewport, and network timing. Ensure the capture waits for fonts and other required resources. Save console output and a pair of images from the same fixture before changing application code.
File a useful issue when the reproduction remains
After testing the latest release available to your project, provide a small HTML/CSS reproduction rather than a full application. Include:
Best Value
- JavaScript Jquery
- Introduces core programming concepts in JavaScript and jQuery
- Uses clear descriptions, inspiring examples, and easy-to-follow diagrams
- html2canvas version and browser/operating-system versions;
- the exact
text-shadowdeclaration and computed styles; - viewport dimensions, device-pixel ratio, and requested
scale; - whether
document.fonts.readycompleted; - console output with logging enabled;
- the browser rendering and generated canvas for comparison.
Historical project issue guidance also asked reporters to try the latest release, inspect the non-minified build, and check the console. Treat that as reporting context and follow the project’s current issue template when you submit.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance and reliability considerations
A minimal target reduces layout work and makes comparisons repeatable. Capturing a large full-page document can increase memory use and make font or image timing harder to reason about. First prove the shadow with one element; then add surrounding layout and resources back in stages.
Keep the capture environment deterministic where possible: fix the viewport, wait for fonts, use an explicit scale for regression tests, and record browser versions. If your product needs pixel-identical browser output rather than a DOM reconstruction, evaluate whether a native browser screenshot workflow is a better fit.
Or skip the browser setup
If you need a clean website image rather than a local html2canvas reproduction, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one request. Its capture process accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status with X-Page-Verdict and X-Billed headers.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Use the API documentation at https://screenshotneo.com/docs/ for the full option set. The same endpoint supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, 12 device presets or custom viewports, retina scale, PDF paper and page controls, custom CSS and JavaScript, pre-capture clicks, hidden selectors, selector/delay/network-idle waits, request and resource blocking, custom headers/cookies/user agents/Authorization, timezone and geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account to try the endpoint.
Frequently Asked Questions
Does html2canvas support text-shadow?
Yes. The project feature list marks text-shadow as supported, while box-shadow is listed as unsupported. Support does not guarantee pixel-identical output across fonts, browsers, and scales.
Should I always set scale to 1?
No. The default is window.devicePixelRatio. Use an explicit value when you need a reproducible test or output, then validate it in the browsers and densities you support.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsCan onclone change my live page?
No. onclone runs against the cloned document used for capture, so diagnostic changes there do not modify the original page.
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.
