Package Exports

gif-gifcanvas

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gif-gifcanvas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GifCanvas

Gif Canvas creator

How to install

npm i gif-gifcanvas

yarn add gif-gifcanvas

Constructor

Param	Type	Default
canvas	`Canvas`
options?	delay: `number` fps: `number` repeat: `number`	0,60,0

Method	Returns
addFrame()	`GifCanvas`
end()	`Buffer`
animation()	`GifCanvas`

Example

Example gif

const { GifCanvas } = require('gif-gifcanvas');
const { createCanvas } = require("canvas");
const { writeFile } = require('fs')
const path = require("path");

const canvas = createCanvas(250, 250);
const gifcanvas = new GifCanvas(canvas);

for (let i = 0; i < gifcanvas.canvas.width - 50; i+=3) {
    gifcanvas.addFrame(ctx => {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(i, 0, 50, 50);
    });
}

for (let i = 0; i < gifcanvas.canvas.height - 50; i+=3) {
    gifcanvas.addFrame(ctx => {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(200, i, 50, 50);
    });
}

for (let i = 200; i > 0; i-=3) {
    gifcanvas.addFrame(ctx => {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(i, 200, 50, 50);
    });
}

for (let i = 200; i > 0; i-=3) {
    gifcanvas.addFrame(ctx => {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, i, 50, 50);
    });
}

writeFile(path.join(__dirname, './example.gif'), gifcanvas.end(), (err) => {
    if (err) {
        console.error(err);
    }
});