alert("This was by far my most complex code!!Drew a spider by using only canvas lines and arcs and its worth the 400+ lines of javascript!Hope you like it and comment for bugs"); window.onload=function(){ //just in case i add a movement feature Spider={ move:function(){ alert("Move feature is coming soon"); }, spin:function(){alert("spin feature is coming soon"); } } k=0; colorArray=["red","blue","blue","yellow"]; sw=0; //points for each arc points=[ //x,y,radius [0,0,3], [0,0,7], [0,0,9], [0,0,3], [0,0,3], [0,0,7], [0,0,3], [0,0,5], [0,0,7], [0,0,3], [0,0,2], [0,0,6], [0,0,3], [0,0,3], [0,0,7], [0,0,9], [0,0,3], [0,0,3], [0,0,5], [0,0,7], [0,0,3], [0,0,2], [0,0,7], [0,0,3], [0,0,6], [0,0,3] ]; Canvas=document.getElementsByTagName("canvas")[0]; Canvas.height=screen.height-200; Canvas.width=screen.width-10; try{ ctx=Canvas.getContext("2d"); setInterval(position,50); t2=setInterval(crawl,50); positionArcs(); createBody();} catch(e){ alert("You have an Old browser"); } } function createBody(){ ctx.beginPath(); ctx.arc(161,214,50,0,2*Math.PI,true); var color1=ctx.createLinearGradient(120,180,120,210); color1.addColorStop(0,"#ff0000"); color1.addColorStop(1,"#3333ff"); ctx.fillStyle=color1; ctx.fill(); ctx.stroke(); //eyes ctx.beginPath(); ctx.arc(146,168,7,0,2*Math.PI,true); ctx.arc(174,168,7,0,2*Math.PI,true); var color2=ctx.createLinearGradient(131,143,131,181); color2.addColorStop(0,"black"); color2.addColorStop(0.9,"white"); ctx.fillStyle=color2; ctx.fill(); ctx.stroke(); //thorax ctx.beginPath(); ctx.moveTo(180,240); ctx.lineTo(205,240); ctx.lineTo(239,265); ctx.lineTo(215,297); ctx.lineTo(160,310); ctx.lineTo(105,297); ctx.lineTo(84,265); ctx.lineTo(120,240); var color3=ctx.createLinearGradient(131,260,131,271); color3.addColorStop(0,"red"); color3.addColorStop(0.9,"yellow"); ctx.lineWidth="2"; ctx.closePath(); ctx.fillStyle=color3; ctx.fill(); ctx.stroke(); } function crawl(){ points[0][0]+=1.2;points[0][1]+=0.3; points[1][0]+=0.8;points[1][1]+=0.7; points[2][0]+=0.7;points[2][1]+=1.4; points[3][0]+=1.35;points[3][1]+=1.7; points[4][0]+=1.1;points[4][1]+=1.99; points[5][0]+=0.38;points[5][1]+=1.9; if(points[0][0]>120) {clearInterval(t2); t2=setInterval(crawl2,50); } } function crawl2(){ points[6][0]+=0.31;points[6][1]+=1.2; points[7][0]+=1.1;points[7][1]+=2.35; points[8][0]+=0.5;points[8][1]+=2.5; points[9][0]+=0.3;points[9][1]+=3.2; points[10][0]+=0.85;points[10][1]+=2.6; points[11][0]+=1;points[11][1]+=2.9; points[12][0]+=1.1;points[12][1]+=3.6; if(points[6][0]>31){ clearInterval(t2); t2=setInterval(crawl3,50); }} function crawl3(){ points[13][0]+=1.9;points[13][1]+=0.3; points[14][0]+=2.4;points[14][1]+=0.65; points[15][0]+=2.5;points[15][1]+=1.4; points[16][0]+=1.86;points[16][1]+=1.7; points[17][0]+=2.1;points[17][1]+=2; points[18][0]+=2.1;points[18][1]+=2.4; points[19][0]+=2.9;points[19][1]+=1.9; points[20][0]+=2.9;points[20][1]+=1.2; points[21][0]+=2.4;points[21][1]+=2.64; points[22][0]+=2.8;points[22][1]+=2.55; points[23][0]+=2.9;points[23][1]+=3.3; points[24][0]+=2.15;points[24][1]+=2.95; points[25][0]+=2.05;points[25][1]+=3.65; //points[26][0]+=2.9;points[26][1]+=1.9; if(points[13][0]>190){ clearInterval(t2); t2=setInterval(glow,100); } } function glow(){ if(sw){ k++; if(k==4){ sw=0; } } else{ if(k==0) { sw=1; } k--; } } function position(){ ctx.clearRect(0,0,Canvas.width,Canvas.height); createBody(); positionLines(); positionArcs(); //points[5][0]-=0.5; } function positionArcs(){ a=0; for(var i=0;i

Canvas Spider