Cara Membuat Canvas di JavaScript dengan Monafy.Rank

Berikut adalah contoh code JavaScript untuk membuat sebuah canvas menggunakan library Monafy.Rank:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Set canvas width and height
canvas.width = 500;
canvas.height = 200;

// Set background image
const backgroundImage = new Image();
backgroundImage.src = 'https://th.bing.com/th/id/R.248b992f15fb255621fa51ee0ca0cecb?rik=K8hIsVFACWQ8%2fw&pid=ImgRaw&r=0';
backgroundImage.onload = () => {
  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
};

// Set username and discriminator
const username = 'JohnDoe';
const discriminator = '1234';

// Set status
const status = 'online';

// Set level, rank, current XP, and required XP
const level = 2;
const rank = 1;
const currentXp = 100;
const requiredXp = 400;

// Set avatar image
const avatarImage = new Image();
avatarImage.src = 'https://example.com/avatar.png';
avatarImage.onload = () => {
  // Draw avatar image
  ctx.drawImage(avatarImage, 20, 20, 100, 100);

  // Draw username and discriminator
  ctx.font = '20px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText(`${username}#${discriminator}`, 150, 50);

  // Draw status
  ctx.font = '16px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText(`Status: ${status}`, 150, 80);

  // Draw level
  ctx.font = '16px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText(`Level: ${level}`, 150, 110);

  // Draw rank
  ctx.font = '16px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText(`Rank: ${rank}`, 150, 140);

  // Draw XP progress
  const progressWidth = (currentXp / requiredXp) * 200;
  ctx.fillStyle = 'blue';
  ctx.fillRect(150, 170, progressWidth, 20);

  // Convert canvas to image and display it
  const image = new Image();
  image.src = canvas.toDataURL();
  document.body.appendChild(image);
};

Pastikan Anda mengganti URL gambar latar belakang dan URL avatar dengan URL yang sesuai. Anda juga dapat menyesuaikan posisi dan tampilan teks sesuai kebutuhan.