drawing with javscript int a web form

I am building a drawing chat system in C# and using javascript to do the drawing on the client side.  I have a div tag called "divCanvas" in my web form on which I am going to do all of my drawing. THe DIV is:

<DIV onmouseup="toggleLoading(true);setEnd(event.offsetX, event.offsetY);drawPic();setData();" onmousedown="setStart(event.offsetX, event.offsetY);" id="divCanvas"
style="border: 1px solid black; DISPLAY: inline; Z-INDEX: 104; LEFT: 96px; WIDTH: 456px; POSITION: absolute; TOP: 24px; HEIGHT: 404px"  align="center"></DIV>

I have a seperate panel where I set the tools (such as draw rectangle, circle) and colors.  The setStart() function in the div sets the starting x and y values and the setEnd() sets the final x and y values.  My drawing functions use these values to draw the shapes.  But, how can I create a function to draw free form (like a brush or a pencil tool?)  I am guessing I need some kind o array to keep track of all the points the mouse goes over...but I am not sure.

I am attaching in the code section everything required to get the line tool working so that you can see how I have this set up.

Thanks!!

index.aspx:
 
<TABLE id="tblTools" style="BORDER-RIGHT: black thin; BORDER-TOP: black thin; BORDER-LEFT: black thin; WIDTH: 80px; BORDER-BOTTOM: black thin; HEIGHT: 32px" cellSpacing="1" cellPadding="1" width="80" border="1" title="Select some Tool">
<TR>
<TD onclick="setTool(CONST_ACTION_TOOL_LINE);">&nbsp;<IMG style="CURSOR: hand" alt="" src="images/line.jpg"></TD>
</TR>
</TABLE>
 
 I have another table like that where you can pick colors.
 
drawing.js:
 
//Function to set the current tool
function setTool(InputTool){
	
	CurrentTool = InputTool;
	
} //End of setTool
 
//Function to set the starting points for the tool
function setStart(inpX, inpY) {
 
	StartX = inpX;
	StartY= inpY;
	
} //End of setStart
 
//Functions to set the end point for the tool
function setEnd(inpX, inpY) {
 
	EndX = inpX;
	EndY= inpY;
	
} //End of setEnd
 
//Function to actually draw the tool
function drawPic() {
	
	var jg = new jsGraphics("divCanvas");    
	jg.setColor(CurrentColor);
	jg.setStroke(CurrentStroke);
	
	//Check the input tool and take action accordingly
	switch (CurrentTool) {
		case CONST_ACTION_TOOL_LINE:
			jg.drawLine(StartX, StartY, EndX, EndY);
			break;
                                //other cases here
                                } //End of switch
                          jg.paint();
	
	//Call the ajax function to load the data on session
	
} //End of drawPic
 
    graphcs.js:
When drawline is called:
this.drawLine = mkLinDott;
 
function mkLinDott(x1, y1, x2, y2)
{
	if (x1 > x2)
	{
		var _x2 = x2;
		var _y2 = y2;
		x2 = x1;
		y2 = y1;
		x1 = _x2;
		y1 = _y2;
	}
	var dx = x2-x1, dy = Math.abs(y2-y1),
	x = x1, y = y1,
	yIncr = (y1 > y2)? -1 : 1,
	drw = true;
	if (dx >= dy)
	{
		var pr = dy<<1,
		pru = pr - (dx<<1),
		p = pr-dx;
		while ((dx--) > 0)
		{
			if (drw) this.mkDiv(x, y, 1, 1);
			drw = !drw;
			if (p > 0)
			{
				y += yIncr;
				p += pru;
			}
			else p += pr;
			++x;
		}
		if (drw) this.mkDiv(x, y, 1, 1);
	}
 
	else
	{
		var pr = dx<<1,
		pru = pr - (dy<<1),
		p = pr-dy;
		while ((dy--) > 0)
		{
			if (drw) this.mkDiv(x, y, 1, 1);
			drw = !drw;
			y += yIncr;
			if (p > 0)
			{
				++x;
				p += pru;
			}
			else p += pr;
		}
		if (drw) this.mkDiv(x, y, 1, 1);
	}
}
 
function mkDiv(x, y, w, h)
{
	this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';
}

Select allOpen in new window