badge-generator.js

  const ctx = canvas.value?.getContext('2d');
  if (ctx) {
    // Set canvas drawable size to be same as template image
    ctx.canvas.width = templateImage.width;
    ctx.canvas.height = templateImage.height;

    ctx.drawImage(templateImage, 0, 0, templateImage.width, templateImage.height);

    // Calculate employee name position relatively to the canvas drawable size
    let nameTextPosX = ctx.canvas.width * 0.495;
    let nameTextPosY = ctx.canvas.height * 0.81;

    // Draw employee name
    ctx.font = '700 40px Lora';
    ctx.fillStyle = '#f4f4f4';
    ctx.textAlign = 'center';
    ctx.fillText(props.employeeName.toUpperCase(), nameTextPosX, nameTextPosY);

    // Calculate rank name position
    let rankTextPosX = ctx.canvas.width * 0.495;
    let rankTextPosY = ctx.canvas.height * 0.835;

    // Draw employee rank
    ctx.font = '25px Lora';
    ctx.fillStyle = '#f4f4f4';
    ctx.fillText(props.rank.toUpperCase(), rankTextPosX, rankTextPosY, 500);

    // Calculate badge number position on canvas
    let numberTextPosX = ctx.canvas.width * 0.495;
    let numberTextPosY = ctx.canvas.height * 0.885;

    // Draw employee badge number
    ctx.font = '40px Lora';
    ctx.fillStyle = '#f4f4f4';
    ctx.fillText(props.badgeNumber.toString(), numberTextPosX, numberTextPosY);

    // Prepare location to draw employee photo
    ctx.beginPath();
    let photoCenterX = ctx.canvas.width * 0.495; // 49.5%
    let photoCenterY = ctx.canvas.height * 0.545; // 54.5%

    const photoRadius = 180;
    ctx.arc(photoCenterX, photoCenterY, photoRadius, 0, Math.PI * 2);
    ctx.strokeStyle = '#dbbb6a';
    ctx.lineWidth = 10;
    ctx.stroke();

    // Draw employee photo if image has been loaded
    if (employeePhoto.value) {
      ctx.clip();

      const minSize = 360;
      const scaleFactor = Math.max(minSize / employeePhoto.value.width, minSize / employeePhoto.value.height);
      const scaleWidth = Math.ceil(employeePhoto.value.width * scaleFactor);
      const scaleHeight = Math.ceil(employeePhoto.value.height * scaleFactor);
      ctx.drawImage(employeePhoto.value, photoCenterX - scaleWidth / 2, photoCenterY - scaleHeight / 2, scaleWidth, scaleHeight);
    }
  }