@pencil.js/gif

Turn any Pencil.js scene into an animated GIF.

Installation

npm install @pencil.js/gif

CDN

You can download this directly from a CDN.

ESM

<script type="module">
    import gif from "https://unpkg.com/@pencil.js/gif/dist/gif.esm.js";

    gif();
</script>

ES5

<script src="https://unpkg.com/@pencil.js/gif"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/@pencil.js/gif"></script>

<script>
    gif();
</script>

Usage

import gif from "@pencil.js/gif";

gif(<OffscreenCanvas>, <nbFrames>, <options>);

Example

Check out the examples directory.

Documentation

gif(<scene>, <nbFrame>)

Turn any Pencil.js scene into an animated GIF.

Name	Type	Default	Comment
offscreenCanvas	OffscreenCanvas	required	OffscreenCanvas or Scene coming from Pencil.js to be draw onto the GIF
nbFrames	Number	1	Number of frames to draw
options	GIFOptions	(see below)	Some options

GIFOptions

You can also use all canvas-gif-encoder's options.

Name	Type	Default	Comment
speed	Number	1	Rendering speed ratio (1 means ~60fps, 0.5 means ~30fps ...)

Bundler

This package is using Worker to offload the computation to a separate thread and not lock the browser.

When using a web bundler like Webpack or Rollup, you should use a worker-loader plugin like webpack worker-loader or rollup worker-loader.

License

MIT