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? <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> Code (markup):
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 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"; } Code (markup): php form <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> Code (markup):