Free tools Windows power users keep installed
One-click scans. No signup required.
Start by isolating overflow clipping from transform handling. A rotated text element can look correct in the browser yet appear cropped or shifted in an html2canvas capture when the renderer measures a box before applying the CSS transform, then builds a clipping region from that box. That mechanism is a plausible diagnosis raised in open issue #3277, not a confirmed upstream root cause or released fix.
Make a minimal reproduction, compare it with a native browser screenshot, and toggle one variable at a time: overflow, the transform, the capture boundary, and the type of text. A narrowly scoped workaround—such as capturing a larger wrapper with visible overflow—can often avoid the crop while you verify the real cause.
What html2canvas is actually doing
html2canvas does not ask the browser for a native screenshot. It reconstructs the document in a canvas by reading the DOM, computed styles, geometry, and paint properties. Its FAQ states: “Every CSS property must be manually implemented to render correctly, so html2canvas will never have full CSS support.” A CSS feature that works in the browser therefore can still fail during reconstruction.
Canvas 2D itself can paint transformed text. The Canvas standard says that the current transformation matrix is applied “when painting text, shapes, and Path2D objects.” Rotation is therefore possible at the canvas layer. The defect can instead be in html2canvas’s DOM measurement, clipping, transform-origin calculation, or paint order.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
Build a minimal reproduction before changing production CSS
Capture only the element containing the rotated text and record the exact conditions. Include:
- html2canvas package version, browser and browser version, operating system when relevant, and the date tested.
- The smallest HTML and CSS that still fails.
- The transform function, angle, and
transform-origin. - Width, height, padding, borders, and every ancestor’s
overflow, scrolling, and clipping styles. - Whether the content is ordinary DOM text, an input value, a textarea, or an image.
- The element passed to
html2canvas(), any explicit viewport or window dimensions, and whether the target is inside a scrolled container. - A native browser screenshot and the html2canvas output from the same state.
Change one property per capture. If you change the transform, overflow, dimensions, and capture target together, a visually improved result will not tell you which condition mattered.
Small test page
<div id="stage">
<div id="label">Rotated label</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@latest/dist/html2canvas.min.js"></script>
<script>
html2canvas(document.getElementById('stage')).then(canvas => {
document.body.appendChild(canvas);
});
</script>
<style>
#stage {
width: 260px;
height: 120px;
overflow: hidden;
border: 1px solid #999;
padding: 20px;
}
#label {
display: inline-block;
transform: rotate(-18deg);
transform-origin: left top;
white-space: nowrap;
}
</style>Run the same page with overflow: visible, with the transform removed, and with a larger #stage. Save each output and note whether the crop edge, position, or dimensions change.
Test the overflow-and-transform interaction
The report in issue #3277 describes a ClipEffect built from border-box or padding-box curves whose bounds were reportedly measured without the transform. The author suggested avoiding that clipping effect when an element or parent has a CSS transform. The issue remained open when checked on September 29, 2026, with no associated pull request shown. Treat this as a debugging lead, not an established patch.
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 reinstallRank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
| Test | What to change | How to interpret the result |
|---|---|---|
| Overflow toggle | Change the rotated element and each clipping ancestor from hidden, clip, or scroll to visible. |
If the crop disappears only with visible overflow, clipping geometry is implicated. Check the layout impact before using this as a workaround. |
| Transform toggle | Remove the transform, then apply it to a wrapper instead of the text node. | A changed crop or offset points to transform measurement or transform-origin handling, but does not identify the exact internal function. |
| Capture boundary | Capture a wrapper with padding and enough space for the rotated corners. | If the wrapper succeeds, the original target or an ancestor was too tightly bounded. The output may include extra content. |
| Text type | Replace an input or control value with a plain text element, then test the control separately. | A difference isolates control rendering from ordinary text and avoids conflating two implementation paths. |
| Browser version | Repeat in current Chrome/Chromium, Firefox, and Safari releases. | A browser-specific result belongs in the report; do not generalize it to all supported browsers. |
Practical workarounds while you investigate
Capture a roomier wrapper
Put the rotated text in a wrapper with padding on all sides, set the wrapper’s overflow to visible, and capture that wrapper instead of the tightly clipped field. This avoids relying on a transformed element’s narrow bounds. It can also include more background or neighboring content, so compare the output dimensions with your requirements.
Use a cloned-document style override
If your application cannot change its live layout, apply a narrowly scoped override to the cloned document during capture. The html2canvas options include a clone style-copy callback, commonly used as onclone, where you can select the target and set temporary padding or overflow: visible. Keep the selector specific, remove the override after the capture, and verify that fonts, line wrapping, and stacking remain unchanged. This is a local experiment, not proof that the upstream renderer should skip every clip effect on transformed nodes.
html2canvas(document.querySelector('#capture'), {
onclone: clonedDocument => {
const target = clonedDocument.querySelector('#capture');
target.style.overflow = 'visible';
target.style.padding = '40px';
}
}).then(canvas => {
document.querySelector('#result').replaceChildren(canvas);
});Move the transform to a wrapper
As a diagnostic, leave the text untransformed and rotate a wrapper that has explicit dimensions and extra space. If this works, you have reduced the number of transformed boxes html2canvas must measure. Keep it only if the resulting layout matches the browser view and your accessibility or interaction behavior is unaffected.
Do not assume scale fixes clipping
Changing canvas scale or output dimensions can improve raster sharpness, but it does not correct a clip path calculated from the wrong bounds. Fix geometry first, then tune resolution.
Recommended Free Tools
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Use html2canvas options carefully
Viewport dimensions, ignored-element settings, and clone style-copy callbacks are useful for making a reproduction deterministic. They do not, by themselves, establish a fix for transformed-text clipping.
- Set viewport width and height explicitly when responsive CSS changes the element’s dimensions between runs.
- Use an ignored-element rule only to remove unrelated overlays from the test; never hide the element whose rendering you are diagnosing.
- Use the clone callback for temporary, targeted styles rather than changing global production CSS.
- Wait until fonts and application data have loaded before capture so a fallback font is not mistaken for a transform bug.
Keep related transform reports separate
Pull request #3153 concerns an input/image error involving transform: translateX(15%) rotate(-12deg);. A commenter said its change was merged into html2canvas-pro, but the pull request was still open in the main repository when viewed. That report is evidence of related transform-handling problems; it does not demonstrate a fix for the cropped rotated-text case in issue #3277. Report whether your failure is cropping, orientation, position, glyph shaping, or input rendering, because those symptoms can arise in different code paths.
Troubleshoot by symptom
| Symptom | Likely area to test | Next action |
|---|---|---|
| Only the rotated corners are cut off | Overflow clip or a target box measured before rotation. | Capture a padded wrapper and repeat with visible overflow. |
| Text is complete but shifted | Transform origin, ancestor transform, or coordinate conversion. | Set an explicit transform-origin, remove ancestor transforms, and compare coordinates. |
| Text is the wrong size or wraps differently | Viewport, font loading, or cloned-document styles. | Fix viewport dimensions, wait for fonts, and inspect computed styles in the clone. |
| Plain text works but an input does not | Control-value rendering rather than ordinary text painting. | Provide a separate minimal control reproduction; do not use the plain-text result as proof. |
| Only one browser fails | Browser-specific computed geometry or resource timing. | Record exact browser versions and include both outputs in an upstream report. |
| Blank canvas or timeout | Page readiness, blocked resources, or capture timing. | Reduce the page to the smallest case and verify images, fonts, and scripts load before capture. |
When to file an upstream issue
The project FAQ’s stated approach for missing or incomplete CSS support is to create a test case and open an issue. File one when a minimal reproduction still fails after you have identified the controlling variables.
Include the complete HTML/CSS, html2canvas version, browser and operating-system details, native and canvas captures, the overflow chain, transform and transform-origin values, capture boundary, text type, and the result of disabling overflow. State exactly whether the defect is clipping, orientation, position, glyph shaping, or input rendering. Avoid presenting the issue author’s proposed styles.transform === null condition as a drop-in upstream change; it has not been confirmed as a released solution.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Or skip the browser setup
If you need a server-side image or PDF rather than a DOM-canvas experiment, ScreenshotNeo returns a capture from one request. Its cleanup step accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.
See the full parameter list in the ScreenshotNeo documentation. The API supports full-page captures with lazy images, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, PDF paper and margin controls, custom CSS and JavaScript, pre-capture clicks, selector hiding, selector/delay/network-idle waits, ad and tracker blocking, custom headers/cookies/user agents/Authorization, timezone and geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs also work for easier migration.
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)
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}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools 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. Every feature is available on every plan. Create a free ScreenshotNeo account to try it without a card.
FAQ
Does a successful native screenshot prove html2canvas is wrong?
No. It proves the browser’s own compositor can render that combination. html2canvas follows a separate DOM-to-canvas implementation, so the useful comparison is diagnostic rather than a conformance test.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Should I apply the issue author’s proposed transform condition directly?
No. The condition is an unconfirmed idea in an open report. Test a scoped workaround, document its visual side effects, and submit the minimal case so maintainers can evaluate the renderer change.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Which browsers should be included in a report?
Test the modern evergreen Chrome/Chromium, Firefox, and Safari environments relevant to your users, and write down exact browser versions rather than saying only “Chrome” or “Safari.”
Frequently Asked Questions
Does a successful native screenshot prove html2canvas is wrong?
No. It proves the browser compositor can render that combination; html2canvas uses a separate DOM-to-canvas implementation, so the comparison is diagnostic rather than a conformance test.
Should I apply the issue author’s proposed transform condition directly?
No. It is an unconfirmed idea in an open report. Use a scoped workaround, verify side effects, and submit a minimal reproduction.
Which browsers should be included in a report?
Test the modern evergreen Chrome/Chromium, Firefox, and Safari environments relevant to your users, recording exact browser versions.
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.
