Paint Chat

Earlier I was thinking of how to make my ShoutBox more better, so i thought it would be great if I add some feature so that I can graphicaly explain what i want to convey. I started with this idea, and thought of paint type interface where screen can be synchronized with all users. So I took a code of java applet from my friend, which provided basic functionalities of paint system like brush, basic geometrical shapes and choice of color. But that required an extra java and c program to run on server side and also java applet was too sluggish. So I started thinking across some other lines..

Then I came across HTML:Canvas, This feature is being supported by Gecko 1.8 (i.e. Firefox 1.5 and later) and also Opera 9 along with Safari. So canvas is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. Mozilla developer center has great tutorial on how to play with canvas element. Some Links:

• Drawing Graphics with Canvas
• Canvas Tutorial
• Canvas examples

Basic functions in drawing shapes involved were: stroke(), moveTo(x, y), lineTo(x, y), beginPath() etc. So first started with how to control drawing of curves with mouse, so registering events with onmousedown and onmouseup. So idea is to record mouse coordinates every 100ms and then drawing curves, lines using lineTo(x,y). It also provides feature to line styles (using lineWidth = value, lineJoin = type) and applying colors to shape (using strokeStyle = color). I used imagemaps for selecting brush width and setting colors. So now this paint arena was complete but still not ready for sync between different users.

For using it for interaction among different users, i had to store coordinates, styles on a central server. This has to be done by php. so problem was how to call a php function from javascript so trick involved was inside javascript do this:

var testImg = new Image();
testImg.src="paint.php?action=identifier&x="+value1+"&y="+value2;