Graph Coloring Application

This is my second web application and this application is an implementation of graph coloring problem by using HTML Canvas. Here i am using Google App Engine to run my application. I have explained about it in my earlier post  Google App Engine. My application contains server side and client side. Client side handles the request from user and server side respond to the user request. Both of the server program and client program are written in javascript. Client program uses HTML5 CANVAS to draw and color graph. Client program sends the adjacency list to the server program by using jquery and server program generates colour list by using that adjacency list. This colour list will send back to the client.


HTML5 CANVAS is used to draw the graph in my graph coloring application. HTML5 CANVAS is a very useful to draw graphics. It uses javascript. A canvas is a drawable region defined in HTML code with height and width attributes.Here i am using a Canvas of width=1000 and height=450.

<canvas id="myCanvas" width="1000" height="450" style="border:8px solid red;"></canvas>

This defines that a square shaped Canvas of id “myCanvas” with a width and height of 1000 and 450 respectively with a red border. We can access this by using javascript.
The Canvas element has no drawing ability of its own. So it is done by using javascript. The javasctipt uses id to find Canvas element.
For example:

var c= document.getElementById("myCanvas");

Then the javascript create a context object.
For example:

var cxt = c.getContext("2d");

The getContext(“2d”) is a built in HTML5 object and it help us to draw rectangles,squares,circles etc.

Java Script:

Here javascript is using to Draw elements in Canvas.I take first the mouse position to draw nodes and lines. Double click is used to draw nodes and single click is used to draw lines.

function getCursorPosition(e)
 var x;
 var y;
 if (e.pageX != undefined && e.pageY != undefined)
 x = e.pageX;
 y = e.pageY;
 x = e.clientX + document.body.scrollLeft +
 y = e.clientY + document.body.scrollTop +

 x -= c.offsetLeft;
 y -= c.offsetTop;
 var cell = new Cell(x,y);
 return cell;

The above code gives the both x and y as the co-ordinates of mouse and it will help to draw nodes and lines. In my program i take these drawing node and line as two events and i am using two event listeners. They are

c.addEventListener("dblclick", halmaOnClick, false);

When Double click is done this event will call the function “halmOnClick” and it draws a node.

function halmaOnClick(e)

cell = getCursorPosition(e);
 cxt.font = "10pt Calibri";
 cxt.fillStyle = "#0000ff";
 cxt.fillText(l,cell.x + 6, cell.y-12);
 l = l+1;

This is the function that draws the nodes.

c.addEventListener("click", line, false);

When single click is done this event will call the function “click” and draw lines.

function line(e)
 if (click== 0)
 cell = getCursorPosition(e);
 x1 = cell.x;
 y1 = cell.y;
 click = 1;
 cell = getCursorPosition(e);
 y2= cell.y;
 click = 0;

This is the function that draws lines.


I am using JQuery to send adjacency list and receive colour list. The sending of adjacency list to the server is by using the .get method in jquery.

 $.get("http://localhost:8080/sign",{adj:JSON.stringify(adj)}, function(response){


The above code is used to send the adjacency list and receive colour list by using jquery. The adjacency list is send by the jquery in the form of a JSON object.
The compleate code of my application can be take from here.
To launch my application click  here .


Single Post Navigation

Leave a Reply

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

You are commenting using your 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

%d bloggers like this: