Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Canvas in function

    Code:
    <form>
      <input  id="a" size=4 name="neg" placeholder="1st Screen size in inch">
      <input  id="b" size=4 name="hoyr" placeholder="2nd Screen size in inch">
      <input type="submit" value="GO!" onclick="getValue()">
    </form>
    </div>
    
    
    <canvas id="MyCanvas" width="1000" height="1000"></canvas>
    
    <script type="text/javascript">
    function getValue()
    {
    	var x = document.getElementById("a").value;
        var y = document.getElementById("b").value;
    
    var aWidth;
    var aHeight;
    var bWidth;
    var bHeight;
    
    
    var c= document.getElementById("MyCanvas");
    var ctx= c.getContext("2d");
    
    ctx.fillStyle="#4AA02C";
    ctx.fillRect(0,0,x,y);
    }
    Here, it draws canvas then disappears immediately.
    Last edited by jonjo; 07-26-2011 at 12:02 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    You have not closed your </script> tag.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Of course it disappears immediately because you are submitting a form which always results in a page refresh

    So you'll have to either
    1. Move the onclick from a button type "submit" to a button type "button" OR
    2. "return false" at the very end of getValue()

  • Users who have thanked devnull69 for this post:

    jonjo (07-26-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks it works!


  •  

    LinkBacks (?)


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •