JS exercise 5 – Mouse Arcs

This exercise will allow to draw arcs following the mouse, with a random start angle. The mouse coordinates are written into the HTML body.

This is the code for the exercise:

<!DOCTYPE html>
<html>
<head>
	<title>Mouse arcs</title>
	<script type="text/javascript">
	var ctx, canvas;
	var mouseX, mouseY;
	function setup(){
		canvas=document.getElementById("myCanvas");
		ctx=canvas.getContext("2d");
		setInterval(draw, 10);
		canvas.addEventListener("mousemove",checkMouse);
	}
	function draw(){
		ctx.strokeStyle="rgba(255,0,0,0.1)";
		ctx.lineWidth=5;
		ctx.beginPath();
		var startAngle=Math.random()*Math.PI*2;
		var endAngle=startAngle+Math.PI/4;
		ctx.arc(mouseX,mouseY,50,startAngle,endAngle,false);
		ctx.stroke();
	}
	function checkMouse(myEvent){
		mouseX=myEvent.pageX-canvas.offsetLeft;
		mouseY=myEvent.pageY-canvas.offsetTop;
		document.getElementById("pixelX").innerHTML="x:"+mouseX;
		document.getElementById("pixelY").innerHTML="y:"+mouseY;
	}
	</script>
</head>
<body onload="setup()">
	<canvas id="myCanvas" width="400" height="400" style="border:1px solid">
	</canvas>
	<p id="pixelX"></p>
	<p id="pixelY"></p>
</body>
</html>

To check for the mouse position, we need to create a listener for mouse movement. The listener will be associated to the canvas, as we will track if the mouse has moved within the canvas. The two parameters of the addEventListener method are the name of the event that is listened to, and the name of the function to be triggered when the event occurs. This is the code for the event listener:

canvas.addEventListener("mousemove",checkMouse);

To learn more about mouse events, including others such as click and mousedown:

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent

And more on event listeners in general:

https://developer.mozilla.org/en/DOM/element.addEventListener

Our “checkMouse” function receives an event parameter, which packs all the info related to the event. In this case, the relevant information will be given by the pageX and pageY properties of the event, which we called “myEvent”. These coordinates refer to the whole page and not just the canvas, so we need to adjust using the canvas’s properties offsetLeft and offsetTop. By default, an HTML page contains 8 pixels of margin (check body defaults in this W3 page). The resulting values were stored in two variables (mouseX, mouseY), that are used to draw the arcs. The checkMouse function, in its initial version:

	function checkMouse(myEvent){
		mouseX=myEvent.pageX-canvas.offsetLeft;
		mouseY=myEvent.pageY-canvas.offsetTop;
	}

We then tracked the mouse coordinates using two paragraphs within the HTML body, with IDs “pixelX” and “pixelY”. JavaScript finds the IDs and writes the mouse coordinates inside the HTML, with the innerHTML property. The following code went into the checkmouse function:

		document.getElementById("pixelX").innerHTML="x:"+mouseX;
		document.getElementById("pixelY").innerHTML="y:"+mouseY;

Further exploration:

KinecticJS is “an HTML5 Canvas library that extends the 2d context by adding region events for desktop and mobile applications, extends the 3d context by wrapping WebGL (…), and also provides animation support for both contexts.”

http://www.kineticjs.com/

This is a screenshot of the resulting applet:

Link to the exercise: http://mlab.taik.fi/mediacode/coursefiles/course_2011_10/5-mouse_arcs.html

Advertisements

One thought on “JS exercise 5 – Mouse Arcs

  1. Pingback: HTML 5 Canvas – Mouse Actions and Mouse Arcs « Valeria's blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s