# HTML5 animations



## Braveheart (Aug 19, 2010)

```
<!DOCTYPE HTML>
<html>
<body>

<canvas id="canvas" width="200" height="100;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript"> 

//get reference to the canvas
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");

//draw circle
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(75,75,10,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

//animate circle
var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
var ctx;

function init() {
  ctx = $('#canvas')[0].getContext("2d");
  return setInterval(draw, 10);
}

function draw() {
  ctx.clearRect(0,0,300,300);
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();
  x += dx;
  y += dy;
}

init();

</script>

</body>
</html>
```

anyone know what I'm doing wrong that would cause the red ball to not move?


----------



## Disparia (Aug 19, 2010)

Is init() being called?


----------



## Braveheart (Aug 19, 2010)

Jizzler said:


> Is init() being called?



fixed, but still is not working!


----------



## Disparia (Aug 20, 2010)

$ is not defined. Some js frameworks use it as a shortened version of document.getElementByID().


----------



## temp02 (Aug 20, 2010)

Modified the code a bit to make it work, at least on Firefox, good luck.


```
<html>
<head>
	<script type="text/javascript"> 
		var interval = 25;
		var x = 150;
		var y = 10;
		var vel = 0;
		var timer;

		function setup()
		{
			// get reference to the canvas
			var c = document.getElementById("canvas1");
			var cxt = c.getContext("2d");

			// draw circle
			cxt.fillStyle = "#FF0000";
			cxt.beginPath();
			cxt.arc(75, 75, 10, 0, Math.PI * 2, true);
			cxt.closePath();
			cxt.fill();

			// animate circle
			start();
		}

		function start()
		{
			timer = setInterval(draw, interval);
		}

		function draw()
		{
			var c = document.getElementById("canvas1");

			if (c.getContext)
			{
				var ctx = c.getContext("2d");

				ctx.clearRect(0, 0, 300, 300);
				ctx.beginPath();
				ctx.arc(x, y, 10, 0, Math.PI * 2, true); 
				ctx.closePath();
				ctx.fill();

				// make it bounce :)
				if (vel >= 0)
					if (y < 250)
					{
					}
					else
					{
						vel = -vel;
						y = 250;
					}
				else
					if (y < 250)
					{
					}
					else
					{
					}
				if (y != 250 || vel != 0)
				{
					vel = vel + 5;
					y = y + vel;
				}
				else
					clearTimeout(timer);
			}
		}
	</script>
</head>
<body onload="setup();">
	<canvas id="canvas1" width="300" height="300">
Your browser does not support the canvas element.
	</canvas>

</body>
</html>
```


----------



## Braveheart (Aug 22, 2010)

temp02 said:


> Modified the code a bit to make it work, at least on Firefox, good luck.
> 
> 
> ```
> ...



well you just got me half way! thank you, I won't be copying your work but I will learn from the example and edit mine


----------

