Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Can Someone help me with this HTML5 exercise?

  • 17-09-2013 10:54PM
    #1
    Registered Users, Registered Users 2 Posts: 3,132 ✭✭✭


    HI,

    I am trying to create a painting game in HTML5 and JavaScript.

    I want the first button to call a function that draws a line when I click on the canvas. I want the second button to call a function that draws a circle when I click on the canvas.

    I can build the game from there if I can figure out how to interchange "function doMouseDown()".

    Here is some of my code:

    What am I doing wrong?
    	<html>
    
    	<head>
    		<meta charset="UTF-8"> 
    		<title>Home</title>
    		<link href="style.css" rel="stylesheet" type="text/css">
            </head>
    	<style>
    		canvas
    		{
    		border: 2px solid black;
    		}
    	</style>
    
    		<script>
     
    			function setupCanvas() 
    
    			{
                
    			function initialise() {
    
    				var canvas =document.getElementById("myCanvas");
                                    context = canvas.getContext("2d");
    		 		canvas.addEventListener("mousedown", doMouseDown, true);
    		 		var coordinateX;
    		 		var coordinateY;
    			}
       			
                function doMouseDown(line) 
                
       			{
       				coordinateX= event.pageX;
       				coordinateY= event.pageY;
       	            context.fillRect(coordinateX, coordinateY, 100, 100);
       				context.strokeRect(coordinateX, coordinateY, 100, 100);
       			}
                
     	   		function doMouseDown(circle) 
     	   		
       			{
       				coordinateX= event.pageX;
       				coordinateY= event.pageY;
       				context.beginPath();
    				context.arc(coordinateX, coordinateY, 150, 0, Math.PI, false);
    				context.stroke();
       			}
       			
       			
       			
    		</script>
    	</head>
    
    
    
            <body onload = "setupCanvas(); initialise()"> 
    
    
    		<canvas id="myCanvas" height='400' width='400'>
    		</canvas>	
    		
    		<p>
    		
    			<input type="button"  onclick="doMouseDown(line);" value="Line">
    			<input type="button"  onclick="doMouseDown(circle);" value="Circle">
    		</p>
    </body>
    </html>
    
    


Comments

  • Registered Users, Registered Users 2 Posts: 3,078 ✭✭✭onemorechance


    This is a way of drawing your shapes!
    <html>
    	<head>
    		<meta charset="UTF-8"> 
    		<title>Home</title>
    		<link href="style.css" rel="stylesheet" type="text/css">
    		<style>
    			canvas
    			{
    			border: 2px solid black;
    			}
    		</style>
    		<script>
    			// Global variables
    			var canvas;
    			var context;
    			var coordinateX;
    		 	var coordinateY;
    			var shape;
    			// Add a listener to the canvas
    			function initialise() {
    				canvas=document.getElementById("myCanvas");
    				context=canvas.getContext("2d");
    		 		canvas.addEventListener("mousedown", doMouseDown, true);
    			}
    			// Set the value of the shape
    			function circle() 
    			{
    				shape = "circle";
    			}
    			// Set the value of the shape
    			function line() 
    			{
    				shape = "line";
    			} 
    			// Draw if shape set
    			function doMouseDown() 
    			{
    				if (shape=="line") {
    					coordinateX= event.pageX;
    					coordinateY= event.pageY;
    					context.fillRect(coordinateX, coordinateY, 100, 100);
    					context.strokeRect(coordinateX, coordinateY, 100, 100);
    				}
    				else if (shape=="circle") {
    	   				coordinateX= event.pageX;
    					coordinateY= event.pageY;
    					context.beginPath();
    					context.arc(coordinateX, coordinateY, 150, 0, Math.PI, false);
    					context.stroke();			
    				}
    				else {
    					alert("Select shape.");
    				}
    			}
    		</script>
    	</head>
    	<body onload="initialise();"> 
    		<canvas id="myCanvas" height='400' width='400'>
    		</canvas>	
    		<p>
    			<input type="button"  onclick="line();" value="Line"/>
    			<input type="button"  onclick="circle();" value="Circle"/>
    		</p>
    	</body>
    </html>
    


  • Registered Users, Registered Users 2 Posts: 3,132 ✭✭✭silvine


    Thanks


Advertisement