SSJX.CO.UK
Browser Games | Cybiko | Amiga | Applications | Windows Games | Python | Guides | Site Map

HTML5 Canvas Example - Using The Mouse

This example shows how to respond to the mouse being clicked and how to get the mouses position. If you click inside the square it will jump to a new position.

The Web Page

Below is a simple page, the most important parts are:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="mouse.js"></script>
</head>
<body onload="init();">
<canvas id="canvas" width="480" height="480">Canvas tag not supported..</canvas>
</body>
</html>

The above should be copied and saved as 'mouse.htm'.

The Javascript Program

Now we have our page, we need to add a block and move it! The code parts should be saved in a file called 'mouse.js'. Here's how it works:

This is just boiler plate stuff, we put the browser into strict mode, this is better for tracking errors and preventing bugs from entering our code. Always use it!

We then create variables that will be used to later manipulate our canvas and our block image. The last line creates an 'associative array' to hold the position and size of our block. The variable 'ctx' hold the Canvas 'context', this points to the Canvas methods and properties.

"use strict";

var ctx;
var canvas;
var img=new Image();
	 	  
var pos={x:0, y:0, w:32, h:32};

The init() function:

Finally, once the image has loaded, the update() function is called 10 times a second to update our block. This is a lower frame rate than before because this program is not very active. A lower frame rate means it uses less of the processor which saves energy and does not slow down the browser.

Note : You will to change the image path if your image is in a different location. If you need a block image, right click on this and save : block.gif

function init()
{
	canvas=document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	
	canvas.addEventListener('mouseup',   event_mouseup, false);
	
	setpos();
	
	img.onload= function(){
		setInterval(update, 1000/10);
	}
	
	img.src = 'gfx/block.gif';	
}

The update() function simply calls the draw function. (We could have just put 'draw' in the setInterval line above)

function update()
{
	draw();
}

The event_mouseup() function is called when the mouse button is released. The top half of the function gets the mouse position. The bottom half checks if the mouse position was within the block, if so then the setpos() function gives the block a new position.

function event_mouseup(ev)
{
	var mx,my;

	if ( ev.offsetX == null )
	{ 
		// Firefox
		mx = ev.layerX;
		my = ev.layerY;
		
		mx-=canvas.offsetLeft;
		my-=canvas.offsetTop;
	   
	} 
	else 
	{
		// Other browsers
		mx = ev.offsetX;
		my = ev.offsetY;
	}
	
	//if we hit the block then move it
	if (mx>pos.x && mx<pos.x+pos.w)
	{	
		if (my>pos.y && my<pos.y+pos.h)
		{
		setpos();
		}
	}
	
	
}

The draw() function clears the canvas and draws our block!

function draw()
{
	ctx.fillStyle = "white";
	ctx.fillRect(0,0,canvas.width,canvas.height);
 	
	 ctx.drawImage(img,pos.x,pos.y);
}

Finally

All being well, you should end up with something like this, click on the block to make it move:

This requires a browser that supports HTML5 / Canvas such as Mozilla Firefox 11, Apple Safari 5, Opera 11 or Google Chrome

13/05/2012

Support this site : Visit Play-Asia for games and accessories for new and classic games consoles!