├── .gitignore
├── README.md
├── draw.js
├── frames-gif
    └── .gitkeep
├── frames
    └── .gitkeep
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | frames/*.png
2 | frames-gif/*.gif
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # node-canvas-animation-example
 2 | 
 3 | An example of how to use `node-canvas` to create an animation as a GIF
 4 | and a Video
 5 | 
 6 | ## Install
 7 | 
 8 | Requires a recent version of [node.js](https://nodejs.org/).
 9 | 
10 | For Ubuntu or similar, you want to install these packages first:
11 | 
12 |     sudo apt-get install libcairo2-dev libpangocairo-1.0-0 libpango1.0-dev libjpeg-dev libgif-dev imagemagick gifsicle libav-tools
13 | 
14 | Clone this repository, and then:
15 | 
16 |     npm install
17 | 
18 | ## Running it
19 | 
20 | The `draw.js` file creates a bunch of frames in the `frames/` directory:
21 | 
22 |     node draw.js
23 | 
24 | ## Creating a GIF
25 | 
26 | Requires imagemagick & gifsicle. With Homebrew, you can install
27 | gifsicle with `brew install gifsicle`
28 | 
29 | First, use Imagemagick to convert the series of PNG frames into a series
30 | of static GIFs:
31 | 
32 |     mogrify -format gif -path frames-gif/ frames/*.png
33 | 
34 | And then using gifsicle, create an animated GIF:
35 | 
36 |     gifsicle -d10 frames-gif/*.gif > animated.gif
37 | 
38 | ## Creating a Video
39 | 
40 |     ffmpeg -i frames/%5d.png -c:v libx264 -r 30 -pix_fmt yuv420p circle.mp4
41 | 
42 | For some Ubuntu versions, `ffmpeg` isn't available, but `avconv` does the same job:
43 | 
44 |     avconv -i frames/%5d.png -c:v libx264 -r 30 -pix_fmt yuv420p circle.mp4
45 | 


--------------------------------------------------------------------------------
/draw.js:
--------------------------------------------------------------------------------
 1 | var Canvas = require('canvas'),
 2 |   fs = require('fs'),
 3 |   leftpad = require('leftpad');
 4 | 
 5 | // instead of finding an element, Canvas is a constructor.
 6 | var canvas = new Canvas(600, 100);
 7 | // get a context to draw in
 8 | var ctx = canvas.getContext('2d');
 9 | 
10 | var frame = 0;
11 | 
12 | for (var i = 0; i < Math.PI * 2; i += 0.05) {
13 |   ctx.fillStyle = '#fff';
14 |   ctx.fillRect(0, 0, 600, 100);
15 |   ctx.fillStyle = '#000';
16 |   ctx.beginPath();
17 |   ctx.arc((Math.sin(i) + 1) * 250 + 50, 50, 20, 0, 2 * Math.PI);
18 |   ctx.fill();
19 |   // save a frame as a PNG file to disk
20 |   fs.writeFileSync('frames/' + leftpad(frame++, 5) + '.png', canvas.toBuffer());
21 | }
22 | 


--------------------------------------------------------------------------------
/frames-gif/.gitkeep:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/frames/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmcw/node-canvas-animation-example/b8d42947766e1671e10a082d7ec7df3890fae87e/frames/.gitkeep


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "node-canvas-animation-example",
 3 |   "version": "1.0.0",
 4 |   "description": "an example of using node-canvas to generate gifs and videos",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "node",
11 |     "canvas",
12 |     "animation",
13 |     "example"
14 |   ],
15 |   "author": "Tom MacWright",
16 |   "license": "ISC",
17 |   "dependencies": {
18 |     "canvas": "^1.2.7",
19 |     "leftpad": "0.0.0"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git@github.com:tmcw/node-canvas-animation-example.git"
24 |   }
25 | }


--------------------------------------------------------------------------------