help - Need help with this paint code I wrote

[noobfarm]

Ok these are the things I want to know, Can I make it so you can only draw inside of a small window on the website say 100x100 Px.? also can I make it so that you can start of using one code, but then when they click something such as some text, it will change the code its using? anyways heres the code im using... edit it to do this stuff if you know how and post it for me to use.
thx- noobfarm

<DIV id=pointer></DIV>
<FORM name=fm action=gd.cgi method=post target=_new><INPUT id=l_x type=hidden name=l_x> <INPUT id=l_y type=hidden name=l_y> </FORM>
<SCRIPT>
function save(){
	var buf_x="";
	var buf_y="";
	with(JSD_CONTROL){
		for(i=0;i<canvas.line_number;i++){
			buf_x += LogX[i] + "|"
			buf_y += LogY[i] + "|"
		}
	}
	document.getElementById("l_x").value = buf_x;
	document.getElementById("l_y").value = buf_y;
	document.fm.submit();
}
</SCRIPT>

<SCRIPT>
/* 描画すべきターゲットのオブジェクトキャッシュ */
cache_obj = new Object();
recent_dot = 0;
/* 線を伸ばし中 */
nobasi_x = 0;
nobasi_y = 0;
dot_num = 0;
IE = (navigator.appName == "Microsoft Internet Explorer")?1:0;
if (window.opera){IE = 0}
var mpath   = '';
/* オブジェクト指向の練習 */
var KC = new Object();
KC = {
	Z : 90,
	X : 88,
	Q : 81,
	A : 65,
	plus  : 107,
	minus : 109
}
var USE_VML = 1;

/*
 キャンバスオブジェクト、
 ブラシオブジェクト、を作成
 コントローラーにキャンバスとブラシオブジェクトへを渡す。
*/

/* お絵かきの対象のオブジェクト */
function jsd_canvas(o){
	this.canvasObj = o.canvasObj || document.body;
	/* 現在の座標 */
	this.nowX = 0;
	this.nowY = 0;
	/* 描画待ちの座標 */
	this.PlotX = new Array();
	this.PlotY = new Array();
	/* 描きはじめの座標 */
	this.kitenX = 0;
	this.kitenY = 0;

	this.isIE = (navigator.appName == "Microsoft Internet Explorer")?1:0;
	this.line_number = 0;
	return this;
}
/* ブラシオブジェクト */
function jsd_brush(o){
	this.size  =  o.size || 3;
	this.color =  o.color || "#F00";
	return this;
}
/* コントローラー */
function jsd_control(o){
	this.canvas = o.canvas;
	this.brush  = o.brush;
	this.nowX = 0;
	this.nowY = 0;
	this.mdown = 0;
	this.dot = document.createElement("span", "Dot");
	with(this.dot.style){
		fontSize = "0px";
		background = "red";//Color;
		position = "absolute";
		zIndex = "10000";
	}
	/* 描画の軌跡 */
	this.LogX = new Array();
	this.LogY = new Array();
	return this;
}

// コントローラーにメソッドを追加
jsd_control.prototype = {
	launch : function (){
		/* イベント関連付け */
		with (this){
			canvas.pointerObj = document.getElementById("pointer");
			setBrush(brush.size,brush.color);
		}
	},
	mousedown : function(e){
		this.mdown = 1;
		this.LogX[this.canvas.line_number] = "";
		this.LogY[this.canvas.line_number] = "";
		this.PastX = e.pageX;
		this.PastY = e.pageY;
	},
	mouseup   : function(){
		this.mdown = 0;
		this.canvas.line_number++;
		this.set_next();
	},
	/* 次のストロークのための要素を準備 */
	set_next : function (){
		with(this.canvas){
			var div = document.createElement("div");
			div.id = "l" + line_number;
			/* Dotを格納するSpanを用意しておく */
			document.body.appendChild(div);
			cache_obj[line_number] = div;
			dot_num = 0;
			window.status = "n" + line_number + "";
		}
	},
	logging  : function (){
		/* GDと似せる */
	},
	//ブラシサイズの変更
	setBrush : function (Size,Color){
		with(this.canvas.pointerObj.style){
			width =  Size + "px";
			height = Size + "px";
			background = Color ;
		}
		with (this.dot.style){
			width =  Size + "px";
			height = Size + "px";
		}
	},
	// 始点と終点を設定すると
	// 現在のブラシで線を描画する。
	line     : function (X,Y){
		var xMove = X - this.PastX;
		var yMove = Y - this.PastY;
		var xDecrement = xMove < 0 ? 1 : -1;
		var yDecrement = yMove < 0 ? 1 : -1;
		var b_dot = 1;
		var count = 0;
		if (Math.abs(xMove) >= Math.abs(yMove)){
			for (var i = xMove; i != 0; i += xDecrement){
				count++;
				if(count % b_dot == 0){
					PlotX[PlotX.length] = X - i;
					PlotY[PlotY.length] = Y - Math.round(yMove * i / xMove);
				}
			}
		}else{
			for (var i = yMove; i != 0; i += yDecrement){
				count++;
				if(count % b_dot == 0){
					PlotX[PlotX.length] = X - Math.round(xMove * i / yMove);
					PlotY[PlotY.length] = Y - i;
				}
			}
		}
		for(var i=0;i<PlotX.length;i++){
			this.drawDot(PlotX[i],PlotY[i])
		}
		PlotX=new Array();
		PlotY=new Array();
		this.PastX = X; this.PastY = Y;
	},
	drawDot : function(x,y){
		//現在のラインの両端
		line_number = JSD_CONTROL.canvas.line_number;
		if (recent_dot && this.kitenY == y && !nobasi_y){
			recent_dot.style.width = Math.abs(this.kitenX - x) + 1 + "px";
			//移動方向
			if(this.kitenX > x){
				recent_dot.style.left = x + "px";
			}
			nobasi_x = 1;
			nobasi_y = 0;
		}else if(recent_dot && this.kitenX == x && !nobasi_x){
			recent_dot.style.height = Math.abs(this.kitenY - y) + 1 + "px";
			//移動方向
			if(this.kitenY > y){
				recent_dot.style.top = y + "px";
			}
			nobasi_x = 0;
			nobasi_y = 1;
		}else{
			var dot = this.dot.cloneNode(true);
			with(dot.style){
				left = x + "px";
				top  = y + "px";
			}
			recent_dot = dot;
//			document.getElementById("l" + line_number).appendChild(dot);
			cache_obj[line_number].appendChild(dot);

			this.kitenX = x;
			this.kitenY = y;
			nobasi_x = 0;
			nobasi_y = 0;
		}
	},
	mousemove : function (e,obj){
		with(obj){
			if(USE_VML){
				status = canvas.line_number + ":" + nowX + "," + nowY;
			}
			nowX = e.pageX;
			nowY = e.pageY;
			if(this.mdown){
				this.LogX[canvas.line_number] += nowX + ",";
				this.LogY[canvas.line_number] += nowY + ",";
				line(nowX,nowY);
			}
		}
		with(obj){
			pointerObj.style.left = nowX - (brush.size / 2) + "px";
			pointerObj.style.top  = nowY - (brush.size / 2) + "px";
		}
	},
	keydown : function (e,obj){
		var key = e.keyCode || e.which;
		var bold = function (){
			with(obj.brush){size++;obj.setBrush(size,color);}
		};
		var thin = function (){
			with(obj.brush){
				if(size > 1)size--;obj.setBrush(size,color);}
			};
		var back = function (){
				with(obj.canvas){
					if(line_number > 0){
					line_number--;
					var re = document.getElementById('l'+ (line_number));
					canvasObj.removeChild(re);
					line_number--;
					obj.mouseup();
					}
				}
			};
		switch(key){
			case KC.Z:back();break;
			case KC.Q:bold();break;
			case KC.plus:bold();break;
			case KC.A:thin();break;
			case KC.minus:thin();break;
		}
	},
	addEvent : function(obj, type, listener) {
		if (obj.addEventListener) // Std DOM Events
			obj.addEventListener(type, listener, false);
		else if (obj.attachEvent) // IE
			obj.attachEvent(
				'on' + type,
				function() { listener( {
					type            : window.event.type,
					keyCode         : window.event.keyCode,
					target          : window.event.srcElement,
					currentTarget   : obj,
					clientX         : window.event.clientX,
					clientY         : window.event.clientY,
					pageX           : document.body.scrollLeft+ window.event.clientX,
					pageY           : document.body.scrollTop + window.event.clientY,
					shiftKey        : window.event.shiftKey,
					stopPropagation : function() { window.event.cancelBubble = true }
				} ) }
			);
	}
};

// IE用の描画ルーチン
if (IE && USE_VML){
	IE_draw = new Object();
	IE_draw.prototype = {
		set_next : function(){
			mpath = '';
			var w='<v:shape id="vml_line'
			+ this.canvas.line_number
			+ '" filled="false" strokecolor="' + this.brush.color + '"'
			+ ' strokeweight="' + this.brush.size + 'px" style="behavior:url(#default#VML);'
			+ ' visibility:visible;position:absolute;left:0;top:0;width:100;height:100;antialias:false;"'
			+ ' coordsize="100,100" coordorigin="0, 0" >'
			+ '<v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape>';
			var sp = document.createElement("span");
			sp.innerHTML = w;
			sp.id = "l" + this.canvas.line_number;
			document.body.appendChild(sp);
			cache_obj[this.canvas.line_number] = document.getElementById('vml_line'+ this.canvas.line_number);
		},
		line : function (x,y){
			if(mpath){
				mpath += x + ',' + y + ' ';
			}else{
				mpath = x + ',' + y + ' l ';
			}
			var v = cache_obj[this.canvas.line_number];
			v.path = 'm ' + mpath + ' ';
			v.strokeweight = this.brush.size + "px";
		}
	};
	force_inherit(jsd_control,IE_draw);
}
//コントローラにキャンバスとブラシを登録
//初期値を代入することもできる。
var JSD_CONTROL = new jsd_control({
	canvas :jsd_canvas({
			
		}),
	brush  :jsd_brush({
			size:1,
			color:"red"
		})
});
window.onload = function(){
	JSD_CONTROL.set_next();
	with(JSD_CONTROL){
		addEvent(canvas.canvasObj,'mousedown',function(e){mousedown(e,JSD_CONTROL)})
		addEvent(document,'keydown',function(e){keydown(e,JSD_CONTROL)})
		addEvent(canvas.canvasObj,'mouseup',  function(e){mouseup(e,JSD_CONTROL)})
		//addEvent(canvas.canvasObj,'mouseout',  function(e){mouseup(e,JSD_CONTROL)})
		addEvent(canvas.canvasObj,'mousemove',function(e){mousemove(e,JSD_CONTROL)})
	}
}
JSD_CONTROL.launch();

/* 共通処理 */
// 継承ルーチン
function copy_properties(src, dest){
    for (var prop in src) {
        dest[prop] = src[prop];
    }
}
// 強制的な継承関数
function force_inherit(subClass, superClass) {
    copy_properties(superClass.prototype, subClass.prototype);
}

</SCRIPT>

[noobfarm]

I forgot to say that the color of the thing your drawing is close to the bottom of the code... right now this one is on red... but i want to beable to change it in these colors, red,blue,black,and green.

[noobfarm]

Bump

[noobfarm]

Bump

[schoolkid2]

Do you want the color code for them or the entire thing edited

[noobfarm]

Read the second code bout the colors...