El texto como "bienvenido" no aparece cuando agregué el av
<!DOCTYPE html> <html> <style> @font-face { font-family: OpenSans; src: url(OpenSans-Bold.ttf); } * { font-family: OpenSans; } </style> <body> <canvas id="myCanvas" width="1024" height="500" style="border:1px solid #d3d3d3;"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("myCanvas"); var background = new Image(); background.src = "https://i.imgur.com/ua7gL3M.png"; let av = new Image(); av.src = "https://cdn.discordapp.com/avatars/852848188942581764/6b54aba527059f96ecdcb06763d89dac.png?size=4096" // Make sure the image is loaded first otherwise nothing will draw. background.onload = function(){ ctx.drawImage(background,0,0); // The following lines were moved into the onload callback ctx.beginPath(); ctx.arc(512,160,120,0,2*Math.PI); ctx.strokeStyle = "red" ctx.lineWidth = 15; ctx.stroke(); ctx.closePath(); ctx.clip(); ctx.drawImage(av, 390, 40, 250, 250); ctx.beginPath(); ctx.arc(405,160,120,0,2*Math.PI,true) ctx.clip(); ctx.closePath(); ctx.restore(); //welcome ctx.fillStyle = "#00ffff"; ctx.font = "90px OpenSans"; ctx.shadowColor="black"; ctx.shadowOffsetX = 3; ctx.shadowOffsetY= 3; ctx.shadowBlur= 10; ctx.textAlign = "center" ctx.fillText("WELCOME", (canvas.width / 2) , 360 ); //username ctx.fillStyle = "#2ffa76"; ctx.font = "50px OpenSans"; ctx.shadowColor="black"; ctx.shadowOffsetX = 3; ctx.shadowOffsetY= 3; ctx.shadowBlur= 10; ctx.textAlign = "center" ctx.fillText("Haruke#0001",(canvas.width / 2), 415); //thanks ctx.fillStyle = "#5076ff"; ctx.font = "35px OpenSans"; ctx.shadowColor="black"; ctx.shadowOffsetX = 3; ctx.shadowOffsetY= 3; ctx.shadowBlur= 10; ctx.textAlign = "center" ctx.fillText("Thanks For Joining!!",(canvas.width / 2), 460); } var ctx = canvas.getContext("2d"); </script> </body> </html>Debe tener mucho cuidado con .clip() porque es permanente para el lienzo y las siguientes operaciones. Debe envolver el clip en .save() y .restore() .
Aquí, tengo el código fijo a continuación:
<!DOCTYPE html> <html> <style> @font-face { font-family: OpenSans; src: url(OpenSans-Bold.ttf); } * { font-family: OpenSans; } </style> <body> <canvas id="myCanvas" width="1024" height="500" style="border:1px solid #d3d3d3;"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("myCanvas"); var background = new Image(); background.src = "https://i.imgur.com/ua7gL3M.png"; let av = new Image(); av.src = "https://cdn.discordapp.com/avatars/852848188942581764/6b54aba527059f96ecdcb06763d89dac.png?size=4096" // Make sure the image is loaded first otherwise nothing will draw. background.onload = function(){ ctx.drawImage(background,0,0); // The following lines were moved into the onload callback ctx.beginPath(); ctx.arc(512,160,120,0,2*Math.PI); ctx.strokeStyle = "red" ctx.lineWidth = 15; ctx.stroke(); ctx.closePath(); ctx.save(); ctx.clip(); ctx.drawImage(av, 390, 40, 250, 250); ctx.restore(); //welcome ctx.fillStyle = "#00ffff"; ctx.font = "90px OpenSans"; ctx.shadowColor="black"; ctx.shadowOffsetX = 3; ctx.shadowOffsetY= 3; ctx.shadowBlur= 10; ctx.textAlign = "center" ctx.fillText("WELCOME", (canvas.width / 2) , 360 ); //username ctx.fillStyle = "#2ffa76"; ctx.font = "50px OpenSans"; ctx.shadowColor="black"; ctx.shadowOffsetX = 3; ctx.shadowOffsetY= 3; ctx.shadowBlur= 10; ctx.textAlign = "center" ctx.fillText("Haruke#0001",(canvas.width / 2), 415); //thanks ctx.fillStyle = "#5076ff"; ctx.font = "35px OpenSans"; ctx.shadowColor="black"; ctx.shadowOffsetX = 3; ctx.shadowOffsetY= 3; ctx.shadowBlur= 10; ctx.textAlign = "center" ctx.fillText("Thanks For Joining!!",(canvas.width / 2), 460); } var ctx = canvas.getContext("2d"); </script> </body> </html>