d=document;k="background:#";h=d.createElement("h1");h.innerHTML="Draw.";b.insertBefore(h,c);for($ in a)a[$[0]+($[6]||$[2])]=a[$];x=150;y=120;c.width=c.height=x*2;z=c.style;z.cssText=k+"416012";A=["000","C0C0C0","C5B358"];co="#"+A[0];for(i=0;i<4;i++)l(A[i]);drw=oLp=0;
onmousemove=function(e){var j=c;eX=e.pageX;eY=e.pageY;oL=j.offsetLeft;oT=j.offsetTop;e=eY-oT;f=eX-oL-x;g=e-x;if(f*f+g*g<=y*y){z.cursor="crosshair";oLp=1;if(drw==1)with(a){ln(eX-oL,eY-oT);strokeStyle=co;sr()}}else{z.cursor="default";drw=oLp=0}};onmouseup=function(){drw=0};onmousedown=function(e){if(oLp){var j=e.target;eX=e.pageX;eY=e.pageY;oL=j.offsetLeft;oT=j.offsetTop;drw=1;with(a){ba();lineWidth=3;mv(eX-oL,eY-oT)}}};
function l(e){n=d.createElement("a");n.id=e;n.style.cssText=k+e+";cursor:pointer;height:15px;float:left;margin:0 8px 0 0;width:15px";n.onclick=function(j){co="#"+j.target.id};b.appendChild(n)}with(a){g=cR(x,y,0,x,y,200);g.addColorStop(0,"#f00");g.addColorStop(1,"#600");ba();fillStyle=g;ac(x,x,y,0,Math.PI*2,false);ca();fl()};
d=document;
h=d.createElement('h1');
h.innerHTML='Draw.';
b.insertBefore(h, c);
// context abbreviation loop
for($ in a){
a[$[0]+($[6]||$[2])]=a[$];
}
// commonly used integers
x=150;
y=120;
c.width=c.height=x*2;
k='background:#';
z=c.style;
z.cssText=k+"416012";
// pen color array
A=['000','C0C0C0','C5B358'];
co = '#'+A[0];
//create color squares
for(i=0;i<4;i++){
sqr(A[i]);
}
// not overlapping circle
oLp = 0;
// not drawing
drw = 0;
onmousemove=function(e){
// get mouse/canvas properties
gTs(e,c)
// mouse intersects circle
if(dI(eX-oL, eY-oT)){
z.cursor='crosshair';
oLp = 1;
// if the mouse is down, leave a mark
if (drw == 1) {
with(a){
ln(eX-oL, eY-oT); // lineTo
strokeStyle = co;
sr() // stroke
}
}
}
// mouse off circle
else {
z.cursor='default';
oLp = 0;
drw = 0
}
};
onmouseup=function(){ drw = 0}
onmousedown=function(e){
// if overlapping
if(oLp) {
gTs(e,e.target)
drw = 1;
with(a){
ba(); // beginPath
lineWidth=3;
mv(eX-oL, eY-oT) // moveTo
}
}
}
// get target values
function gTs(e,t){
eX=e.pageX;
eY=e.pageY;
oL=t.offsetLeft;
oT=t.offsetTop;
}
// create square: k='background:#', v=color from array
function sqr(v){
n=d.createElement('a');
n.id=v;
n.style.cssText=k + v +';cursor:pointer;height:15px;float:left;margin:0 8px 0 0;width:15px';
n.onclick=function(e){co='#'+e.target.id}
b.appendChild(n)
}
// does intersect: a=pageX, b=pageY, x=circleX/circleY, y=circleRadius
function dI(a,b) {
f = a-x;
g = b-x;
return f*f+g*g <= y*y
}
// create sphere
with(a){
g=cR(x,y,0,x,y,200); // createRadialGradient
g.addColorStop(0,'#f00');
g.addColorStop(1,'#600');
ba(); // beginPath
fillStyle=g;
ac(x, x, y, 0, Math.PI*2,false); // arc
ca(); // closePath
fl() // fill
}
