HTML5 Canvas text not appearing

canvas, html, javascript

Solution

The code outside of your function is triggered immediately, put it inside the function so it's called when it needs to be (as it currently stands, it calls nothing. And when you click the button, it's returning the input value to the onclick method. Try this instead:

function clicked(){
   var x=document.getElementById("form_val");
   var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");
   ctx.font="25px Verdana";
   ctx.fillText(x.value,250,250);
}

Problem

I am trying to display a text on a canvas by entering a message in a textbox but it's not appearing. Here is my code: ``` <html> <body> <canvas id="myCanvas" width="600" height="400"></canvas> <input type="text" name="fname" size="50" id="form_val"> <button onclick="clicked()">Submit</button> <script type="text/javascript"> function clicked () { var x = document.getElementById("form_val"); return x.value; } var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "25px Verdana"; ctx.fillText(clicked(), 250, 250); </script> </body> </html> ```

Original source