How to Save a Gemini Canvas as an Image

6 October 2026 · 6 minute read

To save a Gemini Canvas as an image, open the canvas, choose Share & export, then Copy contents, and paste that code into an HTML-to-PNG renderer, because Gemini has no image or HTML download for a web page, infographic or app. The free alternative is to paste the code into a plain-text file called canvas.html, open it in Chrome and take a full-page screenshot. Documents and slides are different: export them to Google Docs or Google Slides and download a PDF or PNG from there.

The short version: web pages, infographics and apps: Copy contents, then render the code. Documents: Export to Docs, then File > Download > PDF. Slides: Export to Slides, then File > Download > PNG or PDF. A screenshot of the preview only catches what fits in the panel.

What can you export from a Gemini Canvas?

Google's Canvas help page lists the ways out as of October 2026: a public share link, Export to Docs, Export to Slides, Copy contents, and Export to Colab for Python. None of them saves the preview as a picture or downloads an .html file, so the right route depends on what the canvas holds.

Canvas type	Gemini's own options	How to get an image or PDF
Web page, infographic, custom visual or app	Share link, Copy contents	Copy contents, then render the code as a PNG or PDF
Document	Export to Docs, Copy contents	In Google Docs, File > Download > PDF
Slides	Export to Slides, or export as a PDF	In Google Slides, File > Download > PNG (one slide at a time) or PDF
Python code	Export to Colab	It is code, not a page: run it in Colab instead

Workspace accounts can also share a canvas snapshot through Google Drive (available to users since June 2026), but that shares the canvas itself, not an image file. If you also use ChatGPT, the same problem and the same fix apply there: see ChatGPT canvas to PNG.

How do you copy the code out of a Gemini Canvas?

Open the canvas in a desktop browser at gemini.google.com. Canvas works in the phone apps with editing limits, and the copied code is easier to save on a computer.
Check the preview shows the version you want. Ask for any changes in the chat first. The copy is the canvas as it is now, not an earlier version you liked.
Click Share & export, then Copy contents. The whole page's code is now on your clipboard.
Check how it starts. A complete page begins with <!DOCTYPE html> or <html>. If it begins with import lines, it is React component code that only runs inside Gemini. Ask Gemini to "turn this into a single standalone HTML file that opens directly in a browser" and copy again.

To keep a copy, paste it into a plain-text editor (Notepad on Windows, or TextEdit on a Mac after Format > Make Plain Text) and save it as canvas.html. Double-click the file and it opens in your browser as an ordinary web page, outside Gemini.

How do you turn the copied code into a PNG?

There are two routes, and both are free for occasional use.

In your browser, with nothing uploaded. Open canvas.html in Chrome, press F12 (Cmd+Option+I on a Mac), then Ctrl+Shift+P (Cmd+Shift+P), type "screenshot" and choose Capture full size screenshot. The PNG follows your screen and window, so its pixel size varies, and very long pages can be cut off. The guide to HTML to PNG without code covers exact sizes, Firefox and Edge.

By pasting the code. Renda's Gemini Canvas and ChatGPT to PNG page takes the code you copied (or the .html file) and returns the whole page as one PNG at the page's own width, or 1280 pixels wide if it has none. Pages up to 4,096 pixels tall come out at 2x, so text stays sharp; pages up to 8,192 pixels tall come out at 1x, and anything taller is cut at that point, with a note on the result page. You can also pick a social size (Instagram 4:5, square or Story, X, LinkedIn, a YouTube thumbnail or a link preview) or a PDF. Libraries from cdnjs, jsDelivr or unpkg, Google Fonts and images on https addresses all load. Five PNGs a month are free, with no account and no watermark.

Why not just screenshot the canvas preview?

For a quick look, a screenshot is fine. For anything you will post, present or print, it falls short in three ways.

Problem	Why it happens
Gemini's interface gets in	The preview sits in a panel next to the chat, so you crop by hand or keep the chat in the shot
Only part of the page	The panel scrolls inside its own frame. Browser full-page capture does not reach into a scrolling area inside a page, so it captures Gemini, not your whole canvas
Soft text	The image is at your screen's resolution, and a narrow panel on a laptop is small. Platforms then compress it further

Rendering the code avoids all three, because the page is laid out on its own, at its intended width, with nothing around it.

What about canvas apps with saved data or Gemini features?

Canvas apps can save data, share it between users and call Gemini features. Those parts run inside Gemini. A copied page shows its starting screen (the first tab, default filters, an empty form), and anything that asks Gemini for content will not work once the page is outside Gemini. A render also captures the page as it first loads, so a result you clicked through to in the preview will not be in it.

To capture a particular state, ask for it as a static page: "Make a static version of this page that shows [the results screen], with this data written into the page and no buttons." Then copy and render that version.

There is a sharing reason to prefer an image, too. Gemini's share link opens only on gemini.google.com, not in the phone apps, and for an app, Google warns that "anyone with that public link can view and edit data associated with the app". A PNG shows the result without handing out the data.

How do you ask Gemini for a canvas that renders cleanly?

A few lines at the end of your prompt save a round of fixes later. They fix the size, keep fonts and libraries on hosts that load anywhere, and switch chart animation off, so a capture never catches a half-drawn bar.

Build this as a single standalone HTML file with all CSS and JavaScript inline.

- Size: exactly [1080x1350] (Instagram 4:5). For a report or dashboard instead: [1280px] wide, with the height following the content.
- Fonts: [Inter] from Google Fonts only.
- Libraries: load any charting library from cdnjs, with animations turned off.
- Images: embed them in the file or use full https addresses.
- Colours: a light background with fixed colours, no dark theme.
- Content: write every word and number into the page. No tabs, filters or buttons that hide content.

The page: [describe it, with your exact text and numbers].

Gemini's Create menu offers an infographic option as well as web pages; the same lines work for it. For layout and wording tips, see the guide to making an infographic with AI.

Frequently asked questions

Can I download the HTML file from Gemini Canvas?

No. There is no download for a canvas's code. Copy contents is the way out: paste the code into a plain-text editor and save it with a name ending in .html.

Is Gemini Canvas free?

Yes. Google lists Canvas on the free Gemini plan as of October 2026, so the whole route in this guide works without paying for Gemini.

Can I save a Gemini Canvas as a PDF?

Documents and slides export to Google Docs and Slides, which download as PDF. For a web page or app, open the saved .html file and print it to PDF (the text stays selectable, but page breaks can split charts), or render it as a PDF, which keeps the layout exactly but makes each page a single image, so the text cannot be selected.

Can Gemini turn the canvas into an image itself?

Gemini's image model can draw a picture from a description, but it draws a new image rather than capturing your page, so words, numbers and layout can change. When the exact content matters, capture the code instead.

Turn your Gemini Canvas into a PNG

Copy contents in Gemini, paste the code, and download the whole page as a sharp PNG or a PDF. Five free PNGs a month, with no account and no watermark.

Paste your canvas code