javascript - HTML5 Canvas text not appearing

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>

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>

Share Improve this question edited Dec 5, 2013 at 23:10 Sumner Evans 9,1755 gold badges31 silver badges48 bronze badges asked Dec 5, 2013 at 22:57 stud91 1,8547 gold badges31 silver badges57 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

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);
}

HTML:

<canvas id="myCanvas" width="600" height="400"></canvas>

<input type="text" name="fname" size="50" id="form_val">
<button id='submit'>Submit</button>

JavaScript:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");
ctx.font="25px Verdana";

document.getElementById('submit').addEventListener('click', clicked);

function clicked(){
 var x=document.getElementById("form_val");
 // Create the text when the button is clicked
 ctx.fillText(x.value,250,250);
}

Fiddle.

I believe you want to do something like this

<script type="text/javascript">
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);
}

With this, the text will be filled when clicking the button. Note: I haven't tested the code, but you might get the picture

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HTML5 Canvas text not appearing - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)