locked
<canvas> and random images issue RRS feed

  • Question

  • My code is working and the images are appearing randomly, but the problem is when I click some times to change the image nothing appear!!! I wrote a very small code to test the random numbers and everything is fine, but I don't know why some times nothing appear when I click to change the image.

    This is my code:

    <html>
    <head>
        <title></title>
       
        <script type="text/javascript">
    	var cwidth = 900;
    	var cheight = 500;
    	var ctx;
    	var canvas1;
    	var img=["img1.png", "img2.png", "img3.png", "img4.png"];
    
    function init(){
       ctx = document.getElementById('canvas').getContext('2d');
        canvas1 = document.getElementById('canvas');
       canvas1.addEventListener('click',ranImage,false);
     
       ctx.strokeRect(0,0,cwidth,cheight);
      ctx.font = 'bold 16px Georgia, Nevis, sans-serif';
      
    
    } 
    function ranImage(ev) {
    	
    	var ranImg = parseInt(Math.random() * 4);
    	var newImage = new Image();
    	
    	newImage.src = img[ranImg];
    
    	var mx = 60;
    	var my = 60;
    
    	
    	ctx.clearRect(0,0,cwidth,cheight);
    	ctx.strokeRect(0,0,cwidth,cheight);
    		
    	ctx.drawImage(newImage,mx,my, 300,300);
    
    
    }
    
    
    
    </script>
    </head>
    <body onLoad="init();">  
    <canvas id="canvas" width="900" height="500">
    Your browser doesn't support the HTML5 element canvas.
    </canvas>  
    <br/>
    Click to change the image.
    
    </html>

    Regards,

    • Moved by Min Zhu Monday, January 30, 2012 5:53 AM (From:Windows Presentation Foundation (WPF))
    Saturday, January 28, 2012 8:19 AM

Answers

  • > Your browser doesn't support the HTML5 element canvas.
     
     

    you should use <!DOCTYPE html> and append the following tag:

    <meta http-equiv='X-UA-Compatible' content='IE=9' /> 
    

    an example is here
     
     
    Saturday, January 28, 2012 8:37 PM

All replies

  • Not sure what forum you should be in but this is a WPF forum.

     

    LS


    Lloyd Sheen
    Saturday, January 28, 2012 8:01 PM
  • > Your browser doesn't support the HTML5 element canvas.
     
     

    you should use <!DOCTYPE html> and append the following tag:

    <meta http-equiv='X-UA-Compatible' content='IE=9' /> 
    

    an example is here
     
     
    Saturday, January 28, 2012 8:37 PM
  • Hi Ailhht,

    Since your quesiton is not about WPF. I have moved this thread to Where is the forum for... forum to help you find an appropriate forum.

    Have a nice day!


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Monday, January 30, 2012 5:54 AM