www.webdeveloper.com
Results 1 to 3 of 3

Thread: Drawing an image to the canvas onClick wont work on first click

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    Drawing an image to the canvas onClick wont work on first click

    I want to draw an image to the canvas on user click. My code works but only after the user clicks the button a second time after the page is first loaded. If you click twice then reload the page it will draw the image on the first click. If you them close all you browser windows then open the page again then you have to click twice again. I'm not sure what’s causing this behavior.

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript">
    			function draw_Domino(){
    				var c=document.getElementById("myCanvas");
    				var ctx=c.getContext("2d");
    				var img2=new Image();
    			
    				img2.src="two_six.png";
    				ctx.drawImage(img2,0,0);
    			}
    		</script>
    	</head>
    
    	<body>
    		<canvas id="myCanvas" width="600" height="600" style="border-style:solid;border-color:#B9D0D0;border-width:3px;">
    			your browser does not support the canvas tag </canvas>
    	
    		<button onClick="draw_Domino()" style="height:50px;width:50px;background-color:green">Go</button>
    	</body>
    </html>

  2. #2
    Join Date
    Mar 2012
    Posts
    2

    Angry

    sorry about the typo's

  3. #3
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,401
    REF: https://developer.mozilla.org/en/Can...l/Using_images

    Quote Originally Posted by developer.mozilla.org
    When this script gets executed, the image starts loading. Trying to call drawImage before the image has finished loading will throw in Gecko 1.9.2 and earlier, and silently do nothing in Gecko 2.0 and later. So you must use an onload event handler
    Code:
        var img = new Image();   // Create new img element  
        img.onload = function(){  
          // execute drawImage statements here  
        };  
        img.src = 'myImage.png'; // Set source path
    Last edited by Angry Black Man; 03-03-2012 at 04:30 PM.

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles