Draw each character with random y-offset

slashCommands/verify/verify.js

@@ -35,25 +35,37 @@ module.exports = {
         async function createCaptcha(captcha) {
             const canvas = createCanvas(200, 75);
             const ctx = canvas.getContext('2d');
-
+            
             // Background color
             ctx.fillStyle = '#000000';
             ctx.fillRect(0, 0, canvas.width, canvas.height);
-
+            
             // Text
             ctx.font = '30px Arial';
             ctx.textBaseline = 'middle';
             ctx.textAlign = 'center';
             ctx.fillStyle = '#ffffff';
-            ctx.fillText(captcha, 100, 37.5);
-
+            
+            // Calculate spacing between characters to fit within canvas width
+            const charWidth = 30;
+            const totalWidth = captcha.length * charWidth;
+            const startX = (canvas.width - totalWidth) / 2;
+            
+            // Draw each character with random y-offset
+            for (let i = 0; i < captcha.length; i++) {
+                const x = startX + i * charWidth + charWidth / 2; // Adjust x-position for each character
+                const y = 37.5 + Math.random() * 30 - 15; // Random y-offset
+                ctx.fillText(captcha[i], x, y);
+            }
+            
+        
             // Adding noise
             for (let i = 0; i < 50; i++) {
                 ctx.fillStyle = `rgba(255,255,255,${Math.random() * 0.9})`;
                 ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 1, 1);
             }
-
-            // Adding white  lines
+        
+            // Adding white lines
             for (let i = 0; i < 30; i++) {
                 ctx.strokeStyle = `rgba(255,255,255,${Math.random() * 1.8})`;
                 ctx.beginPath();
@@ -61,25 +73,26 @@ module.exports = {
                 ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                 ctx.stroke();
             }
-
+        
             // Adding blue lines
             for (let i = 0; i < 30; i++) {
                 ctx.strokeStyle = `rgba(0, 0, 255, ${Math.random() * 0.9})`;
-		ctx.beginPath();
+                ctx.beginPath();
                 ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
                 ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                 ctx.stroke();
             }
-
+        
             // Rotation
             const rotation = Math.random() * 0.2 - 0.1; // Random rotation between -0.1 and 0.1 radians
             ctx.translate(canvas.width / 2, canvas.height / 2);
             ctx.rotate(rotation);
             ctx.translate(-canvas.width / 2, -canvas.height / 2);
-
+        
             const buffer = canvas.toBuffer('image/png');
             return buffer;
         }
+        
 
         if (interaction.channel.id !== cfg.guilds[guildId].channelId) {
             return interaction.reply({ content: cfg.messages.wrongChannel, ephemeral: true })