← Back to Module 08

Export Chart as PNG

Click Download as PNG to save the chart below as an image file. You can also Copy to Clipboard to paste it directly into a slide deck, email, or document.

How It Works

  1. Download: canvas.toDataURL('image/png') serializes the canvas to a base64-encoded PNG string. A temporary <a> element with a download attribute triggers the browser's file save dialog.
  2. Copy: canvas.toBlob() creates a binary Blob, which is written to the clipboard via navigator.clipboard.write(). Requires HTTPS and a user-initiated click event.

A beforeDraw plugin fills the canvas with a white background before Chart.js renders, so the exported PNG has an opaque background instead of transparency.