catozolala-card-canvas/cards/glow-in-the-dark.js

Generate stylish welcome cards with Node.js and canvas

const { createCanvas, loadImage } = require('canvas');

const colorThemes = [
  '#ff005c', '#00ff87', '#ffcc00', '#00cfff',
  '#ff8000', '#a020f0', '#00ffcc', '#ff1aff',
  '#ffffff', '#7289DA'
];

async function generateCardGlowInTheDark({ avatarPath, teks, name, totalMember, backgroundPath }) {
  const canvas = createCanvas(1024, 450);
  const ctx = canvas.getContext('2d');
  const color = colorThemes[Math.floor(Math.random() * colorThemes.length)];

  const bg = await loadImage(backgroundPath);
  ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);

  // Tambahkan efek glow gradasi samping kiri-kanan yang lebih smooth
  const glowWidth = 550;
  const alphaGradient = '66';

  const gradientLeft = ctx.createLinearGradient(0, 0, glowWidth, 0);
  gradientLeft.addColorStop(0, color + alphaGradient);
  gradientLeft.addColorStop(1, '#00000000');
  ctx.fillStyle = gradientLeft;
  ctx.fillRect(0, 0, glowWidth, canvas.height);

  const gradientRight = ctx.createLinearGradient(canvas.width - glowWidth, 0, canvas.width, 0);
  gradientRight.addColorStop(0, '#00000000');
  gradientRight.addColorStop(1, color + alphaGradient);
  ctx.fillStyle = gradientRight;
  ctx.fillRect(canvas.width - glowWidth, 0, glowWidth, canvas.height);

  // Load avatar
  const avatar = await loadImage(avatarPath);
  const avatarSize = 210;
  const avatarX = canvas.width / 2 - avatarSize / 2;
  const avatarY = 40;

  // Efek border glow pada avatar
  ctx.save();
  ctx.beginPath();
  ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2 + 15, 0, Math.PI * 2);
  ctx.shadowColor = color;
  ctx.shadowBlur = 50;
  ctx.strokeStyle = color;
  ctx.lineWidth = 5;
  ctx.stroke();
  ctx.restore();

  // Avatar
  ctx.save();
  ctx.beginPath();
  ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, Math.PI * 2);
  ctx.clip();
  ctx.drawImage(avatar, avatarX, avatarY, avatarSize, avatarSize);
  ctx.restore();

  // TEXT: Welcome
  ctx.font = 'bold 65px sans-serif';
  ctx.fillStyle = 'white';
  ctx.textAlign = 'center';
  ctx.shadowColor = '#000';
  ctx.shadowBlur = 10;
  ctx.fillText(teks, canvas.width / 2, avatarY + avatarSize + 80);

  // TEXT: Username
  ctx.font = 'bold 38px sans-serif';
  ctx.fillStyle = 'white';
  ctx.shadowColor = '#000';
  ctx.fillText(name, canvas.width / 2, avatarY + avatarSize + 130);

  // TEXT: Member Count
  ctx.font = '30px sans-serif';
  ctx.fillStyle = color;
  ctx.shadowColor = '#000';
  ctx.fillText(`You are our ${totalMember}th member!`, canvas.width / 2, avatarY + avatarSize + 175);

  return canvas.toBuffer('image/png');
}

module.exports = {
   generateCardGlowInTheDark
}