drawing with javscript int a web form

Posted on 2009-05-05
Last Modified: 2015-01-05
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.


<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">


<TD onclick="setTool(CONST_ACTION_TOOL_LINE);">&nbsp;<IMG style="CURSOR: hand" alt="" src="images/line.jpg"></TD>



 I have another table like that where you can pick colors.


//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");    




	//Check the input tool and take action accordingly

	switch (CurrentTool) {


			jg.drawLine(StartX, StartY, EndX, EndY);


                                //other cases here

                                } //End of switch



	//Call the ajax function to load the data on session


} //End of drawPic


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;



		if (drw) this.mkDiv(x, y, 1, 1);




		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)



				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+';';


Open in new window

Question by:wizkid2332
1 Comment
LVL 18

Accepted Solution

wilq32 earned 500 total points
ID: 24325388
Just read about onmousemove function:

catch movements on every mousemove function then draw it, after retrieving position from Event (attached to onmousemove event).

Connect that function with your div - then with proper coding you can do it. I wont do this for you because this is alot of coding, especially if I did not wrote the rest so...:)

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now