Sketch Settings

Ssam uses the settings object you provide to prepare and set up the canvas. Any undefined settings will use the default values.

Document Settings

name	type	default	description
`title`	`string`	`"Sketch"`	Set HTML document title. It is displayed at top of tab or window.

name	type	default	description
`mode`	`"2d" \| "webgl" \| "webgl2"`	`"2d"`	See modes for details.
`parent`	`HTMLElement \| string`	`body`	Set an existing HTML element as canvas parent. It can be either an `HTMLElement` or a selector. ex. `document.querySelector('div#app')`, `div#container`
`canvas`	`HTMLCanvasElement`	`null`	Use an existing canvas instead of creating a new one. ex. `document.querySelector('canvas#my-canvas')`
`dimensions`	`[number, number]`	100% of parent's dimensions	Set Canvas width and height in `px`. If not set, it will use the 100% of the parent dimensions.
`pixelRatio`	`number`	`1`	Set other than `1` for higher quality image on supported displays (ie. Apple Retina display)
`scaleToParent`	`boolean`	`true`	Scale canvas to fit inside its parent element.
`scaleContext`	`boolean`	`true`	When true, will scale context so `px` values can work for high pixel ratio.
`pixelated`	`boolean`	`false`	Pixelate canvas rendering

name	type	default	description
`animate`	`boolean`	`true`	Set to `true` for animating. Set to `false` for static sketches or render-on-demand (use with `render` function prop).
`playFps`	`number`	`null`	Set frame rate for playback. This throttles the rendering frequency but the exact frame rate is not guaranteed. If not set, will use the current display refresh rate. Most displays at 60Hz but newer ones at 90, 120Hz or even higher.
`exportFps`	`number`	`60`	Set frame rate for video/GIF export. You can go as high as a format supports (try 120fps with mp4). GIF is capped at 50fps.
`duration`	`number`	`Infinity`	Set loop duration in `ms` (ex. `4000` = 4 sec)
`numLoops`	`number`	`1`	Set how many times to loop a sketch. This value is used to determine the video export duration. Track the current loop count with `props.loopCount`.

name	type	default	description
`filename`	`string`	`""`	Set file name for exported file. if not set, it will use the current datetime string
`prefix`	`string`	`""`	Set prefix to filename
`suffix`	`string`	`""`	Set suffix to filename
`frameFormat`	`"png" \| "jpeg" \| "jpg" \| "webp"`	`"png"`	Set image export format. To export multiple formats at the same time, use array like `["png", "webp"]`.
`framesFormat`	`"gif" \| "mp4" \| "mp4-browser" \| "webm" \| "png"`	`[]`	Set moving image export format. To export multiple frames formats at the same time, use array like `["webm", "gif"]`. `"mp4"` and `"png"` are only supported in dev server with `ffmpeg` installed. `"mp4-browser"` uses WebCodecs for in-browser encoding. You can also pass `{ format, codecStrings }` for `"webm"` and `"mp4-browser"`.
`hotkeys`	`boolean`	`true`	Set to `false` to disable keyboard shortcuts

name	type	default	description
`data`	`object`	`{}`	extra data to pass to the sketch. it is accessible via `props.data`.