Just a cool script I made drawing and ant in canvas using bezier curves. It detects the edges of screen (could be better) and changes colors.

Code:
<!DOCTYPE html>
<html>
<head>
<script>
xv=10
yv=10

posx=25
posy=200

screenw=950
screenh=500

Ax=[50,100,130,135,140,155,175,190,200,210,230,240,260]
Ay=[100,105,120,130,135,140,150,170,200,215,230,250,255,260,280]

function stroke(){

 O=document.getElementById('Q')
 Q.width=Q.width
 var ctx=O.getContext("2d");
    
 ctx.lineWidth = "3"; 
 ctx.strokeStyle = '#000000';
 ctx.fillStyle = '#663333'
      
			if(posx>850)
			   ctx.fillStyle = '#ff0000'
      if(posx<50)
         ctx.fillStyle = '#000000'
	    if(posy<60)
 	       ctx.fillStyle = '#996600'
			
  
	for (j=0;j<15;j++){
		      Ay[j]+=yv
				}
	 
	for (i=0;i<13;i++){
		      Ax[i]+=xv
		    }
			 
	//big body
  ctx.bezierCurveTo(Ax[0], Ay[8], Ax[2], Ay[2], Ax[6], Ay[8]); 
  ctx.bezierCurveTo(Ax[6], Ay[8], Ax[2], Ay[11], Ax[0], Ay[8]);
	
	
	//middle body
	ctx.moveTo(Ax[6],Ay[8]);
  ctx.bezierCurveTo(Ax[6], Ay[8], Ax[9], Ay[6], Ax[10], Ay[8]);
	ctx.bezierCurveTo(Ax[10], Ay[8], Ax[9], Ay[10], Ax[6], Ay[8]);
	
	//little body
	ctx.moveTo(Ax[10],Ay[8]);
	ctx.bezierCurveTo(Ax[10], Ay[8], Ax[11], Ay[7], Ax[12], Ay[8]);
	ctx.bezierCurveTo(Ax[12], Ay[8], Ax[11], Ay[9], Ax[10], Ay[8]);
	
	//top left leg
	ctx.moveTo(Ax[6], Ay[8]);
	ctx.lineTo(Ax[3], Ay[5]);
	
	ctx.moveTo(Ax[3], Ay[5]);
	ctx.lineTo(Ax[1], Ay[3]);
	
	//top middle leg
	ctx.moveTo(Ax[6], Ay[8]);
	ctx.lineTo(Ax[6], Ay[4]);
	
	ctx.moveTo(Ax[6], Ay[4]);
	ctx.lineTo(Ax[5], Ay[1]);
	
	//top right leg
	ctx.moveTo(Ax[6], Ay[8]);
	ctx.lineTo(Ax[8], Ay[5]);
	
	ctx.moveTo(Ax[8], Ay[5]);
	ctx.lineTo(Ax[7], Ay[0]);
	
	//bottom left leg
	ctx.moveTo(Ax[6], Ay[8]);
	ctx.lineTo(Ax[4], Ay[11]);
	
	ctx.moveTo(Ax[4], Ay[11]);
	ctx.lineTo(Ax[1], Ay[13]);
	
	//bottom middle leg
	ctx.moveTo(Ax[6], Ay[8]);
	ctx.lineTo(Ax[6], Ay[12]);
	
	ctx.moveTo(Ax[6], Ay[12]);
	ctx.lineTo(Ax[6], Ay[14]);
	
	//bottom right leg
	ctx.moveTo(Ax[6], Ay[8]);
	ctx.lineTo(Ax[8], Ay[13]);
	
	ctx.moveTo(Ax[8], Ay[13]);
	ctx.lineTo(Ax[7], Ay[14]);
	
 	
	ctx.stroke();
	
	ctx.fill();
	
     if (posx>screenw) xv=-xv
		 if (posx<0)  xv=-xv
	   posx=posx+xv
	   O.style.left=posx
	
	   if (posy>screenh) yv=-yv
	   if (posy<0)  yv=-yv
	   posy=posy+yv
	   O.style.top=posy
	
	setTimeout("stroke()", 100)
}

</script>

</head>
<body onload="stroke('Q')">
<canvas id="Q"  height="546" width="1300"></canvas>
</body>
</html>