Can Someone help me with this HTML5 exercise?

silvine · 17-09-2013 10:54pm #1

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>

onemorechance · 18-09-2013 3:23am

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>

silvine · 18-09-2013 8:55am

Thanks

Can Someone help me with this HTML5 exercise?

Comments