<?php 

        function generateNames() {

            // Canvas initialisieren

            const canvas = document.getElementById('canvas');

            canvas.width = 400;

            canvas.height = 400;

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

    

            // Hintergrundbild laden

            const img = new Image();

            img.src = 'image.png';

            img.onload = function() {

                // Hintergrundbild zeichnen

                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        

                // Namen generieren

                const names1 = [];

                const names2 = [];

                const names3 = [];

                for (let i = 1; i <= 5; i++) {

                const name1 = document.getElementById(`name1-${i}`).value;

                if (name1) names1.push(name1);

                const name2 = document.getElementById(`name2-${i}`).value;

                if (name2) names2.push(name2);

                const name3 = document.getElementById(`name3-${i}`).value;

                if (name3) names3.push(name3);

                }

        

                // Namen auf dem Canvas zeichnen

                const fontSize = 14;

                const x1 = canvas.width / 2;

                const y1 = canvas.height / 1.2;

                const x2 = canvas.width * 0.2;

                const y2 = canvas.height / 1.2;

                const x3 = canvas.width * 0.78;

                const y3 = canvas.height / 1.23;

        

                ctx.font = `${fontSize}px Arial`;

                ctx.textAlign = 'center';

                ctx.textBaseline = 'middle';

                

                // Namen in 3D zeichnen

                ctx.font = `bold ${fontSize}px Arial`;

                ctx.textAlign = 'center';

                ctx.textBaseline = 'middle';

                ctx.fillStyle = 'white';

                ctx.shadowColor = 'black';

                ctx.shadowOffsetX = 2;

                ctx.shadowOffsetY = 2;

                ctx.shadowBlur = 2;



                // Platz 1 Namen

                ctx.fillStyle = 'gold';

                for (let i = 0; i < names1.length; i++) {

                    const name = names1[i];

                    const y = y1 + (i - (names1.length - 1) / 2) * fontSize;

                    ctx.fillText(name, x1, y);

                }

        

                // Platz 2 Namen

                ctx.fillStyle = 'silver';

                for (let i = 0; i < names2.length; i++) {

                    const name = names2[i];

                    const y = y2 + i * fontSize;

                    ctx.fillText(name, x2, y);

                }

        

                // Platz 3 Namen

                ctx.fillStyle = '#CD7F32';

                for (let i = 0; i < names3.length; i++) {

                    const name = names3[i];

                    const y = y3 + i * fontSize;

                    ctx.fillText(name, x3, y);

                }

                

                // Kreiert Download

                function downloadImage() {

                  const canvas = document.getElementById('canvas');

                  const dataURL = canvas.toDataURL('image/png');

                  const link = document.createElement('a');

                  link.download = 'ranking.png';

                  link.href = dataURL;

                  document.body.appendChild(link);

                  link.click();

                  document.body.removeChild(link);

                }

            };

}