Go Premium for a chance to win a PS4. Enter to Win

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 646
  • Last Modified:

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.

<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

1 Solution
Pawel WitkowskiSenior Javascript DeveloperCommented:
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


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now