Random movement of an image created using canvas

noobatjavascrip · 12-03-2012, 05:28 AM

I created an ant using canvas. I need to randomly move the ant around the screen. I cant get my ant to move at all. I know how to do random movement. If I was using a div tag I could get it to work. But I dont know if canvas tags and div tags are the same.

So ultimately I just want the ant I drew in canvas to move randomly around the screen

Any help would be appreciated

Code:

<!DOCTYPE html>
<html>
<head>
<script>

pxv=-2
pyv=-1
	
function stroke(){

var O=document.getElementById("T")
var ctx=O.getContext("2d");

  
   //ctx.strokeStyle=Dark();
	ctx.beginPath();
	
	//big body
  ctx.bezierCurveTo(50, 200, 130, 120, 175, 200); 
  ctx.bezierCurveTo(175, 200, 130, 250, 50, 200);
	
	//middle body
	ctx.moveTo(175,200);
  ctx.bezierCurveTo(175, 200, 210, 150, 230, 200);
	ctx.bezierCurveTo(230, 200, 210, 230, 175, 200);
	
	//little body
	ctx.moveTo(230,200);
	ctx.bezierCurveTo(230, 200, 240, 170, 260, 200);
	ctx.bezierCurveTo(260, 200, 240, 215, 230, 200);
	
	//top left leg
	ctx.moveTo(175, 200);
	ctx.lineTo(135, 140);
	
	ctx.moveTo(135, 140);
	ctx.lineTo(100, 130);
	
	//top middle leg
	ctx.moveTo(175, 200);
	ctx.lineTo(175, 135);
	
	ctx.moveTo(175, 135);
	ctx.lineTo(155, 105);
	
	//top right leg
	ctx.moveTo(175, 200);
	ctx.lineTo(200, 140);
	
	ctx.moveTo(200, 140);
	ctx.lineTo(190, 100);
	
	//bottom left leg
	ctx.moveTo(175, 200);
	ctx.lineTo(140, 250);
	
	ctx.moveTo(140, 250);
	ctx.lineTo(100, 260);
	
	//bottom middle leg
	ctx.moveTo(175, 200);
	ctx.lineTo(175, 255);
	
	ctx.moveTo(175, 255);
	ctx.lineTo(155, 280);
	
	//bottom right leg
	ctx.moveTo(175, 200);
	ctx.lineTo(200, 260);
	
	ctx.moveTo(200, 260);
	ctx.lineTo(190, 280);
	
 	
	ctx.lineWidth = "3"; 
  ctx.fillStyle = '#663333';
	ctx.fill();
	ctx.strokeStyle = '#000000';
	ctx.stroke();
	
	screenw=document.body.clientWidth-50
	screenh=document.body.clientHeight-50
	alert(screenw)

	
	px=300
	py=400
//return("stroke")
 move()
}

		

function move(){

	if (px>screenw) pxv=-pxv
	if (px<0)  pxv=-pxv
	px=px+pxv
	O.style.left=px
	if (py>screenh) pyv=-pyv
	if (py<0)  pyv=-pyv
	py=py+pyv
	O.style.top=py
	window.setTimeout("move()",10)
}


</script>

</head>
<body>
<canvas id="T"  height="500" width="600"></canvas>
<input type="button" value="move" onclick="stroke()">
</body>
</html>