Create

JS API

export([options])

Export the doodle as an SVG, or as a PNG at any scale. Returns a promise.

Syntax

  • await doodle.export([{ scale, detail, download, name }])
scale
Whole-number multiplier on the rendered size. Default 1, which uses the device pixel ratio instead, so on a 2x screen scale: 1 and scale: 2 give a PNG of the same size.
detail
When true, also render the PNG and include its blob and data URL in the result.
download
When true, render the PNG and trigger a download.
name
File name for the download, without the .png extension. Defaults to a timestamp.

The result is { width, height, svg }, where width and height are the rendered size in CSS pixels times scale. The SVG markup wraps the doodle's DOM and styles in a foreignObject, with custom properties inherited from the page and Google fonts embedded. With detail or download it also has blob, the PNG, and source, the SVG as a data URL.

Examples

const doodle = document.querySelector('css-doodle');

// download a PNG at 4x resolution
await doodle.export({
  scale: 4,
  download: true,
  name: 'my-doodle'
});

// get the PNG as a blob
const { blob, width, height } = await doodle.export({ detail: true });

// or just the SVG markup
const { svg } = await doodle.export();
Open in playground

See also