change brush color in javascript paint

matthewst · 08-20-2007, 08:56 PM

First I'm a java noob. Second I borrowed 91.23% of the following code from http://chat.ma.la/draw.html.

I need to be able to change the "brush" color. Any ideas?

Code:

<style>
	body{
	background:#fff;
		padding:0;
	margin:0;
	width:100%;
	height:100%;
	background-color: #FFFFFF;
	background-image: url();
	background-repeat: no-repeat;
	background-position: center;
	background-position:top; 
	}
	#pointer{
		position:absolute;
		background:#000;
		width:3px;
		height:3px;
		font-size:1px;
		z-index:32768;
	}
</style>
</head>
<body onselectstart='return false'>
<center>
<?php
if ($web_image_url != "")
$paint_image = "$web_image_url";
else
$paint_image = "images/my_face.jpg";
?>
<!--//////////////////////help me 1////////////////////////////-->
<form name="palette">
<input name="white" type="button" value="WHITE" onClick="changeColor('white');">
<input name="black" type="button" value="BLACK" onClick="changeColor('black');">
<input name="red" type="button" value="RED" onClick="changeColor('red');">
<input name="color" type="button" value="GREEN" onClick="changeColor('green');">
<input name="color" type="button" value="BLUE" onClick="changeColor('blue');">
</form>
<!--//////////////////////end help me 1////////////////////////////-->
<img src="<?=$paint_image ?>" height="75%">
</center>
<div id="pointer"></div>
<form name="fm" method="POST" target="_new" action="gd.cgi">
<input type="hidden" id="l_x" name="l_x">
<input type="hidden" id="l_y" 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 = "black";//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;
			
			document.body.appendChild(div);
			cache_obj[line_number] = div;
			dot_num = 0;
			window.status = "n" + line_number + "";
		}
	},
	logging  : function (){
		
	},
	
	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;

			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 }
				} ) }
			);
	}
};


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);
}

<!--////////////////////help me 2/////////////////////-->
function changeColor(chosenColor) {
    var color = "";
    
    currentColor = chosenColor;
    color = currentColor + ".gif";
    document.jsd_brush = color;
}
<!--///////////////////end help me 2/////////////////////-->

var JSD_CONTROL = new jsd_control({
	canvas :jsd_canvas({
			
		}),
	brush  :jsd_brush({
			size:2,
			color:"black"
		})
});
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,'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>

matthewst · 08-20-2007, 09:16 PM

moved the palette form to an iframe below the image so the buttons are actually clickable

matthewst · 08-21-2007, 02:53 PM

I was able to get it to change colors using an iframe and form. The problem I have now is each time I select a new color it resets the image (erases everything I drew).

javascript painter

Code:

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";
		<?php
		if ($color == "white")
		echo "background = 'white';";
		elseif ($color == "black")
		echo "background = 'black';";
		elseif ($color == "red")
		echo "background = 'red';";
		elseif ($color == "green")
		echo "background = 'green';";
		elseif ($color == "blue")
		echo "background = 'blue';";
		else
		echo "background = 'black';";
		?>
		position = "absolute";
		zIndex = "10000";
	}

php form

Code:

<form action="copy_painter.php" name="white" target="image_painter">
<input name="color" type="hidden" value="white">
<input name="brush_color" type="submit" value="White">
</form>
<form action="copy_painter.php" name="black" target="image_painter">
<input name="color" type="hidden" value="black">
<input name="brush_color" type="submit" value="Black">
</form>
<form action="copy_painter.php" name="red" target="image_painter">
<input name="color" type="hidden" value="red">
<input name="brush_color" type="submit" value="Red">
</form>
<form action="copy_painter.php" name="green" target="image_painter">
<input name="color" type="hidden" value="green">
<input name="brush_color" type="submit" value="Green">
</form>
<form action="copy_painter.php" name="blue" target="image_painter">
<input name="color" type="hidden" value="blue">
<input name="brush_color" type="submit" value="Blue">
</form>