Function generateCertificateImage

src/hooks/useCertGen.ts:94–160

()

  }

  const generateCertificateImage = async (): Promise<void> => {
    try {
      const offscreenCanvas = document.createElement('canvas');
      const ctx = offscreenCanvas.getContext('2d');

      const certificateImage = new Image();
      certificateImage.src = '/certificate.png';

      await new Promise((resolve, reject) => {
        certificateImage.onload = resolve;
        certificateImage.onerror = reject;
      });

      offscreenCanvas.width = certificateImage.width;
      offscreenCanvas.height = certificateImage.height;

      const recipientName = capitalizeFirstLetter(userName);

      if (!ctx) {
        throw new Error('Error creating off-screen canvas context');
      }

      ctx.drawImage(certificateImage, 0, 0);

      ctx.font = '85px "Brush Script MT", cursive '; // Changed to  font
      ctx.fillStyle = 'black';
      const textWidth = ctx.measureText(recipientName).width;
      const xRecipient = (offscreenCanvas.width - textWidth) / 2;
      const yRecipient = offscreenCanvas.height * 0.54;
      ctx.fillText(recipientName, xRecipient, yRecipient);

      const certificatDescription = 35;
      ctx.font = `${certificatDescription}px Helvetica`;
      const certificatDescriptionText = `has successfully completed ${certificateDetails.course.title} Full Stack Web Development Course`;

      const descriptionWidth = ctx.measureText(certificatDescriptionText).width;
      const xDescription = (offscreenCanvas.width - descriptionWidth) / 2;
      const yDescription = offscreenCanvas.height * 0.62;

      ctx.fillText(certificatDescriptionText, xDescription, yDescription);

      const certificateNumberFontSize = 35;
      ctx.font = `${certificateNumberFontSize}px Helvetica`;
      const certificateNumberText = `Certificate No: ${certificateDetails.certificateSlug}`;
      ctx.fillText(
        certificateNumberText,
        offscreenCanvas.width * 0.35 + 510,
        offscreenCanvas.height * 0.77,
      );

      // Add download date
      const downloadDateText = ` ${new Date().toLocaleDateString()}`;
      ctx.font = `${certificateNumberFontSize / 1}px Helvetica`;
      ctx.fillText(
        downloadDateText,
        offscreenCanvas.width * 0.18 + 20,
        offscreenCanvas.height * 0.94,
      );