What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
If Angular 2 reports that onrendered is not a property of html2canvasOptions, remove that callback and handle the Promise returned by html2canvas instead. The callback belongs to html2canvas 0.4 and older; version 0.5 changed the API to Promise-based rendering. Wait for the canvas, then export or process it in .then() or with async/await.
Why onrendered fails
The error is an API-version mismatch, not an Angular-specific rendering option you need to enable. In html2canvas 0.4 and earlier, code could pass an onrendered callback in the options object. The 0.5 line was rewritten to return a Promise instead. Consequently, a TypeScript declaration for that API may reject onrendered even before the browser runs the capture.
The project’s changelog marks the change in stages: v0.5.0-alpha, dated 19 January 2015, switched the interface to return a Promise; v1.0.0-alpha.1, dated 5 December 2017, removed the deprecated onrendered callback and documented the result as Promise<HTMLCanvasElement>. The supported migration is to consume the returned Promise, rather than silence TypeScript or add a custom declaration for the old callback.
Replace the callback with a Promise
Remove onrendered from the options object. Pass the target element to html2canvas, then use the canvas supplied when the Promise resolves:
#1 Best Overall
// Obsolete with html2canvas 0.5 and later
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
const imgData = canvas.toDataURL('image/png');
}
});
// Promise-based pattern
const element = document.getElementById('exportthis');
if (!element) {
throw new Error('Capture element was not found');
}
html2canvas(element).then((canvas: HTMLCanvasElement) => {
const imgData = canvas.toDataURL('image/png');
// Save imgData or pass the canvas to the next export step.
});The null check matters because document.getElementById() can return null. It also gives a useful failure at the point of capture rather than passing a missing target to the renderer. If the project’s TypeScript version or declarations do not narrow the value after the check, use an explicit type assertion only after confirming the element exists.
Use async/await when the calling method is asynchronous
For a method that can return a Promise, await keeps the export steps in sequence and makes error handling straightforward:
import html2canvas from '@html2canvas/html2canvas';
async saveImage(): Promise<void> {
const element = document.getElementById('exportthis');
if (!element) {
throw new Error('Capture element was not found');
}
const canvas = await html2canvas(element);
const imageData = canvas.toDataURL('image/png');
// Save imageData or pass canvas to the next export step.
}The import path shown here is the one used in the project’s TypeScript example. Check the package and declarations actually installed in your application before copying it: use the import convention that package version documents, and make sure TypeScript resolves declarations for that same installation. The important migration is the Promise result, not a particular import spelling.
Check the installed package and declarations
- Inspect the dependency version in your package manifest or lockfile, and confirm which html2canvas package the Angular application resolves. Do not infer the version from an old code sample.
- Check the installed TypeScript declaration for the function’s options and return type. If it returns a Promise of a canvas, remove
onrenderedand use the Promise pattern. - Update the call site and any tests or wrappers that expect the callback. Avoid editing a library declaration to make an obsolete option compile; that only hides the mismatch and does not restore the removed behavior.
- Build the Angular application again. A successful type check confirms the call matches the declarations, but you still need to test that the element exists and the rendered result is usable.
Do not confuse this migration with pinning an older package solely to preserve callback syntax. The project removed onrendered; Promise handling is the forward-compatible control flow for the documented API.
Free tools Windows power users keep installed
One-click scans. No signup required.
Call html2canvas after Angular has rendered the target
A correct Promise call cannot capture an element that Angular has not created or populated yet. Trigger capture only after the view containing the target exists and any application data needed in that view has been applied. If capture is initiated from a user action, first verify that the expected element is present in the DOM at that point.
Keep the capture boundary explicit: select the element intended for export, check that it exists, await html2canvas, and only then call canvas methods such as toDataURL(). Attach rejection handling so a failed render is visible to the application rather than silently treated as a successful export.
async saveImage(): Promise<void> {
const element = document.getElementById('exportthis');
if (!element) {
throw new Error('Capture element was not found');
}
try {
const canvas = await html2canvas(element);
const imageData = canvas.toDataURL('image/png');
// Continue with the application's download or upload step.
} catch (error) {
// Report the capture failure; do not treat it as a valid image.
console.error('Could not render the export element', error);
}
}The example logs an error for clarity; replace that with the error display or reporting flow appropriate to the application. If failure appears tied to an image or another resource, investigate that resource separately from the obsolete callback.
Troubleshoot a blank, clipped, or incomplete canvas
Replacing onrendered fixes the API usage. It does not guarantee that every page element can be reproduced in a canvas. html2canvas renders from the DOM and its supported CSS and browser resources; it is not a browser screenshot command that bypasses browser security or implements every CSS property.
Recommended Free Tools
Rank #3
Cross-origin images are missing or the canvas cannot be exported
Browser content policy prevents html2canvas from bypassing cross-origin restrictions. The library’s FAQ identifies cross-origin resources as a cause of tainted canvases. You can try useCORS: true when the image server sends the required CORS headers, or configure a suitable proxy. The option alone cannot grant permission that the remote server does not provide.
html2canvas(element, { useCORS: true })
.then((canvas: HTMLCanvasElement) => {
const imageData = canvas.toDataURL('image/png');
})
.catch((error) => {
console.error('Capture failed', error);
});The canvas is blank or only part of the element appears
Browser canvas size limits vary by browser, operating system, GPU, and device, so there is no single safe maximum to assume. The html2canvas FAQ recommends setting windowWidth and windowHeight to match the element’s scroll dimensions when blank or partial output is caused by canvas sizing. Measure the target’s intended scroll dimensions and test on the browsers and devices your users actually use; increasing the virtual viewport is not a cure for every clipping problem.
A CSS style differs from the page
html2canvas states that CSS properties must be implemented individually, so it does not promise full CSS support. If a specific style is absent or rendered differently, verify that property against the library’s supported behavior and simplify or adjust the export styling if necessary. Do not assume that a successful Promise means visual parity with the browser’s normal paint.
Use configuration hooks for diagnosis
The configuration reference documents onError, onclone, ignoreElements, the data-html2canvas-ignore attribute, logging, and viewport sizing options. These help diagnose or control the cloned document and elements included in the capture. Use an exclusion when an element should not appear in the export; use diagnostics to locate the failing stage rather than adding back the removed callback.
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 problemsPerformance, reliability, and export choices
Keep the capture target no larger than the output requires. Full-page or oversized content can run into the browser’s canvas dimensions and produce incomplete output; resource-heavy pages can also make it harder to distinguish a slow capture from a failed one. Capture after necessary content is ready, use rejection handling, and validate the resulting image rather than assuming every resolved capture meets the export’s requirements.
toDataURL('image/png') creates PNG image data from the canvas. If the next step needs another output format or PDF, treat that as a separate export decision: this callback migration only gives the application a canvas. Cross-origin restrictions, browser canvas limits, and CSS support remain relevant regardless of whether the result is later downloaded, stored, or passed to another step.
Or skip the browser setup
If your goal is a screenshot of a website URL rather than a canvas generated from Angular’s in-memory DOM, ScreenshotNeo offers a one-request screenshot API. It is not a drop-in replacement for capturing an unsaved component or local browser state: it captures a URL. For an accessible page, a cURL request can save the returned image directly:
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. ScreenshotNeo accepts cookie or consent banners like a visitor 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 or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its 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 shots per month with no card. Paid plans are Starter at $5 for 3,000 shots, Growth at $15 for 15,000, Pro at $39 for 60,000, Scale at $99 for 250,000, and Business at $249 for 1,000,000; yearly billing gives two months free. Every feature is on every plan. Start with 1,000 free screenshots a month, with no card required.
Frequently asked questions
Why can the error appear in the editor before I click the export button?
TypeScript checks whether the options object matches the installed declaration during compilation or editor analysis. An unsupported property can therefore be flagged before a capture runs in the browser.
Can I use ScreenshotNeo to capture a component that exists only in my Angular view?
No. ScreenshotNeo’s API accepts a URL; it does not receive an element reference from the current browser’s in-memory DOM. Use html2canvas for that component-level capture.
Frequently Asked Questions
Why can the error appear in the editor before I click the export button?
TypeScript checks whether the options object matches the installed declaration during compilation or editor analysis. An unsupported property can therefore be flagged before a capture runs in the browser.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Can I use ScreenshotNeo to capture a component that exists only in my Angular view?
No. ScreenshotNeo’s API accepts a URL; it does not receive an element reference from the current browser’s in-memory DOM. Use html2canvas for that component-level capture.
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.
