Snippet: Canvas+Gif=MEMES | Will Blankenship

Canvas+Gif=MEMES
Will Blankenship — will-at-autocode
Generate a gif using canvas
const {registerFont, createCanvas, loadImage} = require('canvas');
const GIFEncoder = require('gifencoder');

const impact = require('@canvas-fonts/impact');
const comicsans = require('@canvas-fonts/comic-sans-ms');
const helvetica = require('@canvas-fonts/helvetica');

registerFont(impact, {family: 'Impact'});
registerFont(comicsans, {family: 'Comic Sans'});
const buddy = await loadImage(
  'https://will-at-autocode.api.stdlib.com/gif@dev/buddy.jpg'
);
const odns = await loadImage(
  'https://will-at-autocode.api.stdlib.com/gif@dev/odns.jpg'
);
const doge = await loadImage(
  'https://will-at-autocode.api.stdlib.com/gif@dev/doge.jpg'
);

const canvas = createCanvas(300, 300);
const ctx = canvas.getContext('2d');
ctx.font = '30px "Impact"';
ctx.fillStyle = '#FFFFFF';

const encoder = new GIFEncoder(300, 300);

encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(2000); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.

ctx.drawImage(odns, 0, 0, 300, 300);
ctx.fillText('ONE DOES NOT SIMPLY', 25, 50);
ctx.fillText(`require('canvas')`, 45, 270);
encoder.addFrame(ctx);

ctx.clearRect(0, 0, 300, 300);
ctx.drawImage(buddy, 0, 0, 300, 300);
ctx.fillText(`UNTIL NOW!`, 80, 270);
encoder.addFrame(ctx);

encoder.setDelay(750); // frame delay in ms

ctx.clearRect(0, 0, 300, 300);
ctx.drawImage(doge, 0, 0, 300, 300);
ctx.font = '30px "Comic Sans"';
ctx.fillStyle = '#FFFFFF';
ctx.fillText(`wow!`, 80, 270);
encoder.addFrame(ctx);
ctx.fillStyle = '#fc0339';
ctx.fillText(`much meme!`, 20, 40);
encoder.addFrame(ctx);
ctx.fillStyle = '#033dfc';
ctx.fillText(`very gif!`, 160, 150);
encoder.setDelay(2000);
encoder.addFrame(ctx);

const body = encoder.out.getData();
return {
  headers: {'Content-Type': 'image/gif'},
  statusCode: 200,
  body: Buffer.from(body),
};