I’m going to need a Grid, so let’s start with a simple grid. A 2 by 2 grid will work just fine. There’s three ways to draw the grid, one is to draw filled rectangles, another is to just draw the outlines of the rectangles, and finally we could just draw a few lines. It doesn’t really matter how we draw the grid. For this example I’ve draw four outlines.

//Draw on the Canvas
function draw(){
	//Lets draw the outline of four squares on a black canvas.

	//Draw the background
	display.fillStyle = "#000";
	display.fillRect(0,0, 150, 150);

	//Find the midpoints of the Canvas
	var height = 150/2;
	var width = 150/2;

	//all the squares will be white.
	display.strokeStyle = "#FFF";

	//Draw the Four Squares
	display.strokeRect(0, 0, height, width);
	display.strokeRect(0, width, height, width);
	display.strokeRect(height, 0, height, width);
	display.strokeRect(height, width, height, width);
}

Now let’s add the ability to click on the squares. To do this we want to use the offset we learned earlier and figure out which square the user clicked in. Let’s add events on the MouseDown and MouseUp.

Click a square

Here are the two events. There is a lot of repeated code and it only works for 2 by 2 grids. We’ll fix these issues later.

function onMouseDown(evt){
	//Change the Squares Color.
	display.fillStyle = "#0F0";
	display.strokeStyle = "#FFF";

	//Get the mouse cords on the Canvas
	var offset = $("#display").offset();
	var x_pos = Math.floor(evt.pageX - offset.left);
	var y_pos = Math.floor(evt.pageY - offset.top);

	//Get the Midpoints (Because it's a 2 by 2 grid)
	//It's also the height and width.
	var x_mid = 150/2;
	var y_mid = 150/2;

	//Which square was clicked?
	if( x_pos < x_mid && y_pos < y_mid ){
		//Top left
		display.fillRect(0,0, x_mid, y_mid);
		display.strokeRect(0,0, x_mid, y_mid);
	}
	else if( x_pos < x_mid && y_pos > y_mid) {
		//Bottom Left
		display.fillRect(0, y_mid, x_mid, y_mid);
		display.strokeRect(0, y_mid, x_mid, y_mid);
	}
	else if( x_pos > x_mid && y_pos < y_mid){
		//Top Right
		display.fillRect( x_mid, 0, x_mid, y_mid);
		display.strokeRect( x_mid, 0, x_mid, y_mid);
	}
	else if(x_pos > x_mid && y_pos > y_mid){
		//Bottom Right
		display.fillRect( x_mid, y_mid, x_mid, y_mid);
		display.strokeRect( x_mid, y_mid, x_mid, y_mid);
	}

}

function onMouseUp(evt){
	//Change the color back.
	display.fillStyle = "#000";
	display.strokeStyle = "#FFF";

	//Get the mouse cords on the Canvas
	var offset = $("#display").offset();
	var x_pos = Math.floor(evt.pageX - offset.left);
	var y_pos = Math.floor(evt.pageY - offset.top);

	//Get the Midpoints (Because it's a 2 by 2 grid)
	//It's also the height and width.
	var x_mid = 150/2;
	var y_mid = 150/2;

	//Which square was clicked?
	if( x_pos < x_mid && y_pos < y_mid ){
		//Top left
		display.fillRect(0,0, x_mid, y_mid);
		display.strokeRect(0,0, x_mid, y_mid);
	}
	else if( x_pos < x_mid && y_pos > y_mid) {
		//Bottom Left
		display.fillRect(0, y_mid, x_mid, y_mid);
		display.strokeRect(0, y_mid, x_mid, y_mid);
	}
	else if( x_pos > x_mid && y_pos < y_mid){
		//Top Right
		display.fillRect( x_mid, 0, x_mid, y_mid);
		display.strokeRect( x_mid, 0, x_mid, y_mid);
	}
	else if(x_pos > x_mid && y_pos > y_mid){
		//Bottom Right
		display.fillRect( x_mid, y_mid, x_mid, y_mid);
		display.strokeRect( x_mid, y_mid, x_mid, y_mid);
	}
}