Hey everyone! I recently completed a crash course in html, css, and javascript within just one month. However, I encountered an issue while using canvas to draw text with a custom font. The font didn't load the first time I ran the code, but strangely it worked fine after that initial hiccup. I tried troubleshooting but couldn't understand why this happened or how to fix it. Could anyone shed some light on what went wrong and provide a solution? Thank you. Below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
@font-face { font-family: SuperLegendBoy; src: url('SuperLegendBoy-4w8Y.ttf'); }
</style>
</head>
<body>
<canvas id="canvass" width="500" height="500" style="border: 1px solid black"></canvas>
</body>
</html>
<script>
let canvas = document.getElementById("canvass");
let ctx = canvas.getContext("2d");
function drawText() {
ctx.font = "25px SuperLegendBoy";
ctx.fillText("hello", 200, 200);
}
drawText();
</script>