Tag: HTML

This is an example of an asteroids game space ship using the HTML5 canvas and JQuery.

Demo

Download Source

The goal here was to reproduce the same example i posted for Actionscript 3 here: Actionscript 3 Animation Following the Mouse to Show Velocity at an Angle

Foundation HTML5 Animation with JavaScript

That example as well as this is not a full asteroids game. I am posting it for the basic principles of velocity, acceleration and force. In this case the velocity, direction with speed, is computed for x, y and rotation.

JQuery is used for keystroke capture. Our space ship has a thruster for forward motion and ability to turn left or right. The up key is used for thrusting forward and the left and right keys for the turning as you should expect. The ship enters the opposite side of the canvas if it leaves the canvas.

The ship is a basic triangle and also has a flame when thrusting.

[ad name=”Google Adsense”]
You can view the full html file at the end of the post. To explain what is going on inside excerpts of the code are broken out.

The Canvas and Basic Animation Framework

This snippet defines basic constants and variables to simplify code later.

	var CANVAS_WIDTH = 480;		// Canvas width
	var CANVAS_HEIGHT = 480;	// Canvas height
	var FPS = 30;				// Frames per second
	// Canvas center points.
	var canvasCenterX = CANVAS_WIDTH / 2;
	var canvasCenterY = CANVAS_HEIGHT / 2;

The canvas element is created dynamically in JavaScript and appended to the body element. I like to name the canvas drawing context canvas as you can see on line 29.

	// Create html syntax for canvas element.
	var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
	  "' height='" + CANVAS_HEIGHT + "'></canvas");
	// Reference to the canvas 2d context.
	var canvas = canvasElement.get(0).getContext("2d");
	// Dynamically append a canvas element to the body tag.
	canvasElement.appendTo('body');	

These next few snippets represent the animation framework. I have used this in other HTML5 canvas examples.

Three framework functions are init, update and draw. The init function is the initialization of the animation framework and any components. The only components are the canvas and the ship.

For the init method you see some keys being identified for the document to process via JQuery. You could call JQuery that part of the framework.

The init method also initializes the ship object. Without the bounds set, the ship will leave the canvas and may never be seen again.

	// Initialize game
	function init()
	{
		// Set keys for play
		$(document).bind('keyup', KEY_NAME_THRUSTER, keyEvent); 
		$(document).bind('keydown', KEY_NAME_THRUSTER, keyEvent); 
		// Initialize the ship start position and boundaries.
		ship.x = canvasCenterX;
		ship.y = canvasCenterY;
		ship.bounds.left = 0;
		ship.bounds.right = CANVAS_WIDTH;
		ship.bounds.top = 0;
		ship.bounds.bottom = CANVAS_HEIGHT;
	}

Here is the key processing function. I am taking the JQuery key names and converting them to name I set in constants for more readable code.

The keyEvent function also would call animation object keyEvent methods and here we call the ship object;s keyEvent method.

	// Evaluate key input
	function keyEvent(evt)
	{
		// Animation name for the key pressed assumed to be the char name.
		var keyName = String.fromCharCode(evt.keyCode).toLowerCase();
		// Left arrow key
		if (evt.keyCode == 37)
		{
			keyName = KEY_NAME_LEFT;
		}
		// Right arrow key
		if (evt.keyCode == 39)
		{
			keyName = KEY_NAME_RIGHT;
		}
		// Up arrow key
		if (evt.keyCode == 38)
		{
			keyName = KEY_NAME_THRUSTER;	
		}
		// Call animation object keyEvent methods.
		ship.keyEvent(evt.type,keyName);
	}

The animation framework update method is called for updating model data. The draw method refreshes the view.

These two methods are called for each frame in the animation.

	// Update the model data.
	function update() 
	{
		ship.update();
	}
	// Draw the view.
	function draw() 
	{
		canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.strokeStyle = "blue";
		canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.fillStyle = "black";
		canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
		ship.draw();
	}

This is the heart of the animation. Once JQuery loads the animation framework is initialized and then the timer starts to fire for each frame in the animation.

	// JQuery ready - start here
	$(function() 
	{
		// Initialization.
		init();
		// Timer for animation.
		setInterval(function() 
		{
			update();
			draw();
		}, 1000/FPS);
	});

[ad name=”Google Adsense”]
The Ship Object
The ship object has all the needed data and logic to run in the animation framework.

This first snippet of code show the public and private properties. The underscore is indicate a private property. They should be easy to follow with the comment included or their name.

	var ship = 
	{
		shipStrokeColor: "#8ED6FF",
		shipFillColor: "#0000ff",
		flameStrokeColor: "#ff0000",
		flameFillColor: "#ff0000",
		x: 0,  			// Canvas x.
		y: 0,			// Canvas y.
		leftThrust: -5, // Number of degrees for each left turn request.
		rightThrust: 5, // Number of degrees for each right turn request.
		bounds: {top:-1,bottom:-1,left:-1,right:-1}, // Boundaries. -1 = no boundary.
		_drawStartX: 10,// Drawing starting x.
		_drawStartY: 0,	// Drawing starting y.
		_radians:0,		// Rotation value required for the canvas rotate method.
		_vx:0,			// Velocity for x.
		_vy:0,			// Velocity for y.
		_vr:0,			// Velocity for rotation.
		thrust:.2,		// Incremental force added to acceleration.
		_thrust:0,		// Force added to acceleration.
		rotation:0,		// Degrees of rotation.
		_radians:0,		// Degrees of rotation converted to radians for canvas.rotate method.

This is the ship object’s update method required by the animation framework. Here we get into trigonometry and physics. Its fairly easy to follow when you think we need to compute a velocity for the x and y properties and a rotation for direction. Velocity is direction with speed. Then there is force applied to the x and y velocity when the ship’s thruster is used.

First the direction of the ship is computed on line 57. However we added a velocity for rotation. This is the _vr property and basically represents how much we turn with the left and right keys. The leftThrust and rightThrust properties provide an external interface to _vr. We do not have acceleration with rotation, so you can assume the ship automatically compensates for turning to avoid spinning like a top.

Our x and y velocities are represented by _vx and _vy. They are adjusted by force represented by the thrust property. Lines 61 and 62 compute the acceleration based on thrust for both x and y. Then we apply the acceleration to the x and y velocities on lines 64 and 65.

The last step is to set the drawing x and y properties for the ship. Lines 67 – 70 are for the x position and you can see there is a boundary check. This is repeated for the y property on lines 72 – 75.

		update: function() // Update model data
		{
			// Increase rotation by rotation velocity
			this.rotation += this._vr;
			// Calculate rotation in radians
			this._radians = this.rotation * Math.PI / 180;
			// Acceleration for x and y velocity increases
			var ax = Math.cos(this._radians) * this._thrust;
			var ay = Math.sin(this._radians) * this._thrust;
			// Velocity for x and y
			this._vx += ax;
			this._vy += ay;
			// New x position.
			this.x += this._vx;
			// Check for x boundaries
			if (this.x > this.bounds.right && this.bounds.right >= 0) this.x = this.bounds.left;
			if (this.x < this.bounds.left && this.bounds.left >= 0) this.x = this.bounds.right;
			// New y position.
			this.y += this._vy;
			// Check for y boundaries
			if (this.y > this.bounds.bottom && this.bounds.bottom >= 0) this.y = this.bounds.top;
			if (this.y < this.bounds.top && this.bounds.top >= 0) this.y = this.bounds.bottom;
		},

The draw method is the next animation framework requirement. Here we get into the HTML5 canvas method and techniques to draw the ship with and without a thruster flame.

The procedure is simplified by drawing the ship without regard to its position on the canvas and then translating that to the canvas position. The canvas save and restore methods on lines 80 and 112 respectively give us that ability.

In between the work is done by first specifying the translation point on line 82. Then canvas rotation is done. Then we draw the ship. Line 86 determines if we need to draw a flame for thrusters firing. Finally the ship, a basic triangle, is draw.

Note the beginPath methods on lines 88 and 98. These keep the drawing fresh and distinct. Without them you would see the colors and lines overlap and each time the ship is rotated, you would see the previous ship.

		draw: function() // Draw.
		{
			// Draw off canvas
			canvas.save();
			//Translate canvas next draw position
			canvas.translate(this.x,this.y);
			// Rotate
			canvas.rotate(this._radians);
			// Thrusters on draw flame
			if (this._thrust > 0)
			{
				canvas.beginPath();
				canvas.moveTo(this._drawStartX - 12.5, this._drawStartY - 5);	
				canvas.lineTo(this._drawStartX - 25 , this._drawStartY);	
				canvas.lineTo(this._drawStartX - 12.5 , this._drawStartY + 5);	
				canvas.fillStyle = this.flameStrokeColor;
				canvas.fill();
				canvas.strokeStyle = this.flameFillColor;		
				canvas.stroke();
			}
			// Begin drawing the ship
			canvas.beginPath();
			// Start.
			canvas.moveTo(this._drawStartX, this._drawStartY);	
			// 	Ship body	
			canvas.lineTo(this._drawStartX -20 , this._drawStartY + 10);		
			canvas.lineTo(this._drawStartX -15 , this._drawStartY);		
			canvas.lineTo(this._drawStartX -20 , this._drawStartY - 10);	
			// Close.			
			canvas.lineTo(this._drawStartX, this._drawStartY);	
			canvas.fillStyle = this.shipStrokeColor;
			canvas.fill();
			canvas.strokeStyle = this.shipFillColor;		
			canvas.stroke();
			// Put it on the canvas
			canvas.restore();
	  	},

The last integrating for the ship object into the animation framework is handling the keystrokes.

First take a look back at line 18 and you see we set up constants for the key names and key types. These are translated from the keys pressed in the main framework keyEvent function on line 159 shown earlier.

	// Keyname constants
	var KEY_NAME_THRUSTER = "up";
	var KEY_NAME_LEFT = "left";
	var KEY_NAME_RIGHT = "right";
	// Constants to match JQuery Hotkeys event value type.
	var KEY_TYPE_UP = "keyup";
	var KEY_TYPE_DOWN = "keydown";

Then the ship keyEvent method needs to evaluate the key name and key type to update data. For example when the left or right key is released, the rotation velocity is set to zero on lines 136 to 140 to zero. This is our automatic adjustment for acceleration when turning. Consider it an advanced feature.

For turning left or right, the rotation velocity is set to the leftThrust and rightThrust properties in lines 126 to 135. This only happens when the key type is down.

For forward motion is covered on lines 121 to 125. Simply the internal thrust property is set with the public interface thrust property. Here we are applying force.

To stop applying forward force, lines 117 to 121 set the internal thrust back to zero.

You can see the

		keyEvent: function(keyType, keyName)
		{
			// Thruster is off
			if (keyName == KEY_NAME_THRUSTER && keyType == KEY_TYPE_UP)
			{
				this._thrust = 0;
				this._vr = 0;	
			}
			// Thruster off
			else if(keyName == KEY_NAME_THRUSTER && keyType == KEY_TYPE_DOWN)
			{
				this._thrust = this.thrust;
			}
			// Turning left
			if (keyName == KEY_NAME_LEFT && keyType == KEY_TYPE_DOWN)
			{
				this._vr = this.leftThrust;
			}
			// Turning right
			if (keyName == KEY_NAME_RIGHT && keyType == KEY_TYPE_DOWN)
			{
				this._vr = this.rightThrust;
			}
			// Stop turning
			if ((keyName == KEY_NAME_RIGHT || keyName == KEY_NAME_LEFT ) && keyType == KEY_TYPE_UP)
			{
				this._vr = 0;
			}
		}

[ad name=”Google Adsense”]
The entire HTML document for your convenience to view and copy.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<title>HTML5 Canvas Based Animation Asteriods Space Ship Movement</title>
</head>
<body>
<div><a href="https://www.lonhosford.com/lonblog/2011/10/22/html5-canvas-bobbing-circle-animation-demonstrating-sine-wave-movement/">Article Posted By Lon Hosford - HTML5 Canvas Based Animation Asteriods Space Ship Movement</a>
<p>Use up key to move. Left and right keys to turn.</div>
<script type='text/javascript'>
	var CANVAS_WIDTH = 480;		// Canvas width
	var CANVAS_HEIGHT = 480;	// Canvas height
	var FPS = 30;				// Frames per second
	// Canvas center points.
	var canvasCenterX = CANVAS_WIDTH / 2;
	var canvasCenterY = CANVAS_HEIGHT / 2;
	// Keyname constants
	var KEY_NAME_THRUSTER = "up";
	var KEY_NAME_LEFT = "left";
	var KEY_NAME_RIGHT = "right";
	// Constants to match JQuery Hotkeys event value type.
	var KEY_TYPE_UP = "keyup";
	var KEY_TYPE_DOWN = "keydown";
	// Create html syntax for canvas element.
	var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
	  "' height='" + CANVAS_HEIGHT + "'></canvas");
	// Reference to the canvas 2d context.
	var canvas = canvasElement.get(0).getContext("2d");
	// Dynamically append a canvas element to the body tag.
	canvasElement.appendTo('body');	
	// The ship
	var ship = 
	{
		shipStrokeColor: "#8ED6FF",
		shipFillColor: "#0000ff",
		flameStrokeColor: "#ff0000",
		flameFillColor: "#ff0000",
		x: 0,  			// Canvas x.
		y: 0,			// Canvas y.
		bounds: {top:-1,bottom:-1,left:-1,right:-1}, // Boundaries. -1 = no boundary.
		_drawStartX: 10,// Drawing starting x.
		_drawStartY: 0,	// Drawing starting y.
		_radians:0,		// Rotation value required for the canvas rotate method.
		_vx:0,			// Velocity for x.
		_vy:0,			// Velocity for y.
		_vr:0,			// Velocity for rotation.
		thrust:.2,		// Incremental force added to acceleration.
		_thrust:0,		// Force added to acceleration.
		rotation:0,		// Degrees of rotation.
		_radians:0,		// Degrees of rotation converted to radians for canvas.rotate method.
		update: function() // Update model data
		{
			// Increase rotation by rotation velocity
			this.rotation += this._vr;
			// Calculate rotation in radians
			this._radians = this.rotation * Math.PI / 180;
			// Acceleration for x and y velocity increases
			var ax = Math.cos(this._radians) * this._thrust;
			var ay = Math.sin(this._radians) * this._thrust;
			// Velocity for x and y
			this._vx += ax;
			this._vy += ay;
			// New x position.
			this.x += this._vx;
			// Check for x boundaries
			if (this.x > this.bounds.right && this.bounds.right >= 0) this.x = this.bounds.left;
			if (this.x < this.bounds.left && this.bounds.left >= 0) this.x = this.bounds.right;
			// New y position.
			this.y += this._vy;
			// Check for y boundaries
			if (this.y > this.bounds.bottom && this.bounds.bottom >= 0) this.y = this.bounds.top;
			if (this.y < this.bounds.top && this.bounds.top >= 0) this.y = this.bounds.bottom;
		},
		draw: function() // Draw.
		{
			// Draw off canvas
			canvas.save();
			//Translate canvas next draw position
			canvas.translate(this.x,this.y);
			// Rotate
			canvas.rotate(this._radians);
			// Thrusters on draw flame
			//if (this._thrust > 0)
			//{
				canvas.beginPath();
				canvas.moveTo(this._drawStartX - 12.5, this._drawStartY - 5);	
				canvas.lineTo(this._drawStartX - 25 , this._drawStartY);	
				canvas.lineTo(this._drawStartX - 12.5 , this._drawStartY + 5);	
				canvas.fillStyle = this.flameStrokeColor;
				canvas.fill();
				canvas.strokeStyle = this.flameFillColor;		
				canvas.stroke();
			//}
			// Begin drawing the ship
			canvas.beginPath();
			// Start.
			canvas.moveTo(this._drawStartX, this._drawStartY);	
			// 	Ship body	
			canvas.lineTo(this._drawStartX -20 , this._drawStartY + 10);		
			canvas.lineTo(this._drawStartX -15 , this._drawStartY);		
			canvas.lineTo(this._drawStartX -20 , this._drawStartY - 10);	
			// Close.			
			canvas.lineTo(this._drawStartX, this._drawStartY);	
			canvas.fillStyle = this.shipStrokeColor;
			canvas.fill();
			canvas.strokeStyle = this.shipFillColor;		
			canvas.stroke();
			// Put it on the canvas
			canvas.restore();
	  	},
		keyEvent: function(keyType, keyName)
		{
			// Thruster is off
			if (keyName == KEY_NAME_THRUSTER && keyType == KEY_TYPE_UP)
			{
				this._thrust = 0;
				this._vr = 0;	
			}
			// Thruster off
			else if(keyName == KEY_NAME_THRUSTER && keyType == KEY_TYPE_DOWN)
			{
				this._thrust = this.thrust;
			}
			// Turning left
			if (keyName == KEY_NAME_LEFT && keyType == KEY_TYPE_DOWN)
			{
				this._vr = -5;
			}
			// Turning right
			if (keyName == KEY_NAME_RIGHT && keyType == KEY_TYPE_DOWN)
			{
				this._vr = 5;
			}
			// Stop turning
			if ((keyName == KEY_NAME_RIGHT || keyName == KEY_NAME_LEFT ) && keyType == KEY_TYPE_UP)
			{
				this._vr = 0;
			}
		}
	};	
	// Initialize game
	function init()
	{
		// Set keys for play
		$(document).bind('keyup', KEY_NAME_THRUSTER, keyEvent); 
		$(document).bind('keydown', KEY_NAME_THRUSTER, keyEvent); 
		// Initialize the ship start position and boundaries.
		ship.x = canvasCenterX;
		ship.y = canvasCenterY;
		ship.bounds.left = 0;
		ship.bounds.right = CANVAS_WIDTH;
		ship.bounds.top = 0;
		ship.bounds.bottom = CANVAS_HEIGHT;
	}
	// Evaluate key input
	function keyEvent(evt)
	{
		// Animation name for the key pressed assumed to be the char name.
		var keyName = String.fromCharCode(evt.keyCode).toLowerCase();
		// Left arrow key
		if (evt.keyCode == 37)
		{
			keyName = KEY_NAME_LEFT;
		}
		// Right arrow key
		if (evt.keyCode == 39)
		{
			keyName = KEY_NAME_RIGHT;
		}
		// Up arrow key
		if (evt.keyCode == 38)
		{
			keyName = KEY_NAME_THRUSTER;	
		}
		// Call animation object keyEvent methods.
		ship.keyEvent(evt.type,keyName);
	}
	// Update the model data.
	function update() 
	{
		ship.update();
	}
	// Draw the view.
	function draw() 
	{
		canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.strokeStyle = "blue";
		canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.fillStyle = "black";
		canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
		ship.draw();
	}
	// JQuery ready - start here
	$(function() 
	{
		// Initialization.
		init();
		// Timer for animation.
		setInterval(function() 
		{
			update();
			draw();
		}, 1000/FPS);
	});
</script>
</body>
</html>

This is an example of using the HTML5 canvas and using JavaScript Math.atan2 to rotate a canvas drawn arrow to point at the mouse position.

Demo

Download Source

Basically I wanted to reproduce the logic for the same example I did in Actionscript 3 which you can read here: Actionscript 3 Animation Following the Mouse to Show Velocity at an Angle

Foundation HTML5 Animation with JavaScript

This example required using the save and restore canvas methods to draw an arrow, translate its position to center of the canvas and then rotate. Also I needed the beginPath canvas method to solve a gotcha when using save and restore. Without beginPath, the saved drawing keeps the previous drawing and you end up drawing another arrow on the saved arrow. Makes sense, but the syntax of canvas methods are not intuitive in the first place and those who post about the save and restore methods miss this key point.

I am using the Google CDN for JQuery. JQuery is just standard procedure and its use here is to detect we are ready to go.

This example adds the canvas node to the body dynamically in JavaScript and is just a technique. You could include the canvas tag statically. Also you see that event listeners are added to the canvas for mouse up and mouse move events.
[ad name=”Google Adsense”]
You can view the full html file at the end of the post. I will excerpt parts to explain what is going on inside the code.

The Canvas and Mouse Data Singleton
Line 19 creates a singleton to represent mouse data. This was we can inject it into any other classes or objects that need access to mouse information. Our example is simple and only one object needs access to the mouse data.

The remaining lines in this snippet are dynamically appending the canvas element to the document.

	var CANVAS_WIDTH = 480;		// Canvas width
	var CANVAS_HEIGHT = 480;	// Canvas height
	var FPS = 30;				// Frames per second
	// Canvas center points.
	var canvasCenterX = CANVAS_WIDTH / 2;
	var canvasCenterY = CANVAS_HEIGHT / 2;
	// Object to hold mouse information.
	var mouse =
	{
		x:0,
		y:0
	};
	// State for playing or not playing the animations.
	var isPlaying = false;
	// Create html syntax for canvas element.
	var canvasElement = $("<canvas width='" + CANVAS_WIDTH +
	  "' height='" + CANVAS_HEIGHT + "'></canvas");
	// Reference to the canvas 2d context.
	var canvas = canvasElement.get(0).getContext("2d");
	// Dynamically append a canvas element to the body tag.
	canvasElement.appendTo('body');

Mouse Event Handling
Mouse up and mouse move event listeners are added to the canvas on lines 34 and 36.

For the mouse up the function called on line 38 toggles the playing state for the interaction.

Line 43 computes the mouse position and updates our mouse object. There are many posts discussing how to capture the mouse position over the canvas. I modified Bibhas Bhattacharya’s code in his article Converting Mouse Event Coordinates to Canvas Coordinate.

	// Add the mousemove event listener to the canvas element.
	canvasElement.get(0).addEventListener("mousemove", mouseMove, false);
	// Add the mouseup event listener to the canvas element.
	canvasElement.get(0).addEventListener("mouseup", mouseUp, false);
	// Handler for mouseMove events. Computes mouseX and mouseY properties.
	function mouseUp(e)
	{
		isPlaying  = !isPlaying;
	}
	// Handler for mouseMove events. Computes mouseX and mouseY properties.
	function mouseMove(e)
	{
		if (e.pageX)
		{
			mouse.x = e.pageX;
		}
			else if (e.clientX)
		{
			mouse.x = e.clientX + document.body.scrollLeft
		  		+ document.documentElement.scrollLeft;
		}
		mouse.x = mouse.x - canvasElement.get(0).offsetLeft;
		if (e.pageY)
		{
			mouse.y = e.pageY;
		}
		else if (e.clientY)
		{
			mouse.y = e.clientY + document.body.scrollTop
		  		+ document.documentElement.scrollTop;
		}
		mouse.y = mouse.y - canvasElement.get(0).offsetTop;
	}

[ad name=”Google Adsense”]

The Arrow Singleton
Starting on line 68 is the arrow object. It is a singleton for our example. The main purpose is to draw an arrow in any direction, or from a geometry perspective, for any angle.

The main animation timer calls the arrow update method on line 79 to compute the needed angle expressed in radians. The distance from the center of the arrow and the position of the mouse are fed to the Math.atan2 method and we get the needed radian value.

The draw method on line 88 is also called with the main animation timer. The arrow is drawn pointing right. The drawing starts on the top left which is the shaft to the arrow. Drawing proceeds around to return to the same point. You can follow the notes in the code for the path taken.

The arrow measurements are such that drawing assumes a 0,0 registration point within the arrow. So you can see the offsets at each point to assure that registration point.

The arrow is drawn separately at position 0,0 for the canvas using these offsets. This position is translated to the center of the canvas and then rotated as shown on lines 93 and 95. To make this happen with 0,0 coordinates, the canvas save and canvas restore methods on lines 91 and 116 are used.

One important step is to include the canvas beginPath method on line 97. Leaving that out still draws the arrow but draws it over the last arrow. The saved state will assume drawing has not ended and each time the draw method is called it assumes the drawing is additive.

Notice on line 77 the arrow has a mouse object.

	// The arrow drawing we are rotating.
	var arrow =
	{
		strokeColor: "#8ED6FF",
		fillColor: "#0000ff",
		x: -50,  	// Starting x
		y: -25,		// Starting y
		_radians:0,	// Rotation value required for the canvas rotate method.
		centerX: 0,	// Center x point on canvas to draw
		centerY: 0,	// Center y point on canvas to draw.
		mouse: {},	// Mouse object
		_dx:0,
		_dy:0,
		update: function()
		{
			// Distance from mouse x and center of canvas.
			this._dx = mouse.x - this.centerX;
			// Distance from mouse y and center of canvas.
			this._dy = mouse.y - this.centerY;
			// Radians for the canvas rotate method.
			this._radians = Math.atan2(this._dy,this._dx);
		},
		draw: function() // Draw.
		{
			// Draw off canvas
			canvas.save();
			//Translate canvas to center
			canvas.translate(this.centerX, this.centerY);
			// Rotate
			canvas.rotate(this._radians);
			// Create new drawing
			canvas.beginPath();
			// Start point top left of arrow shaft.
			canvas.moveTo(this.x, this.y);
			// Top left of arrow shaft plus top left of arrow head.
			canvas.lineTo(this.x + 50 , this.y);
			canvas.lineTo(this.x + 50, this.y - 25);
			// Arrow point.
			canvas.lineTo(this.x + 100, this.y + 25);
			canvas.lineTo(this.x + 50, this.y + 75);
			// Bottom left of arrow head and bottom left of arrow shaft.
			canvas.lineTo(this.x + 50, this.y + 50);
			canvas.lineTo(this.x, this.y + 50);
			// Close the bottom of arrow shaft.
			canvas.lineTo(this.x, this.y);
			canvas.fillStyle = this.strokeColor;
			canvas.fill();
			canvas.strokeStyle = this.fillColor;
			canvas.stroke();
			// Put it on the canvas
			canvas.restore();
	  	}
	};

The update and draw function are the main animation functions. The timer calls them on lines 148 and 149.

Update simply calls the arrow update method when the state isPlaying is true. The update methods are the place to compute new data.

The draw function calls the arrow draw method. The draw methods are for drawing the view with the animation model data.

Lines 141 to 143 initializes the arrow object with its center point on the canvas and the mouse object. These provided necessary data to compute the angle from its center to the mouse position.

	// Update the model data.
	function update()
	{
		if (isPlaying)
		{
			arrow.update();
		}
	}
	// Draw the views
	function draw()
	{
		canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.strokeStyle = "red";
		canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.fillStyle = "#ccc";
		canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
		arrow.draw();
	}
	// JQuery ready - start here
	$(function()
	{
		// Initialization. Since arrow is a singleton, need to set initalization values.
		arrow.centerX = canvasCenterX;
		arrow.centerY = canvasCenterY;
		arrow.mouse = mouse;
		// Timer for animation.
		setInterval(function()
		{
			update();
			draw();
		}, 1000/FPS);
	});

[ad name=”Google Adsense”]
The entire HTML document for your convenience to view and copy.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<title>HTML5 Canvas Based Animation Rotate Arrow To Mouse Position</title>
</head>
<body>
<div><a href="https://www.lonhosford.com/lonblog/2011/10/22/html5-canvas-bobbing-circle-animation-demonstrating-sine-wave-movement/">Article Posted By Lon Hosford - HTML5 Canvas Based Animation Rotate Arrow To Mouse Position</a>
<p>Click canvas to start and stop. Move mouse to rotate arrow.</div>
<script type='text/javascript'>
	var CANVAS_WIDTH = 480;		// Canvas width
	var CANVAS_HEIGHT = 480;	// Canvas height
	var FPS = 30;				// Frames per second
	// Canvas center points.
	var canvasCenterX = CANVAS_WIDTH / 2;
	var canvasCenterY = CANVAS_HEIGHT / 2;
	// Object to hold mouse information.
	var mouse = 
	{
		x:0,
		y:0
	};
	// State for playing or not playing the animations.
	var isPlaying = false;
	// Create html syntax for canvas element.
	var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
	  "' height='" + CANVAS_HEIGHT + "'></canvas");
	// Reference to the canvas 2d context.
	var canvas = canvasElement.get(0).getContext("2d");
	// Dynamically append a canvas element to the body tag.
	canvasElement.appendTo('body');	
	// Add the mousemove event listener to the canvas element.
	canvasElement.get(0).addEventListener("mousemove", mouseMove, false);
	// Add the mouseup event listener to the canvas element.
	canvasElement.get(0).addEventListener("mouseup", mouseUp, false);
	// Handler for mouseMove events. Computes mouseX and mouseY properties.
	function mouseUp(e)
	{
		isPlaying  = !isPlaying;
	}
	// Handler for mouseMove events. Computes mouseX and mouseY properties.
	function mouseMove(e)
	{
		if (e.pageX)   
		{
			mouse.x = e.pageX;
		} 
			else if (e.clientX)   
		{
			mouse.x = e.clientX + document.body.scrollLeft
		  		+ document.documentElement.scrollLeft;
		}
		mouse.x = mouse.x - canvasElement.get(0).offsetLeft;
		if (e.pageY)   
		{
			mouse.y = e.pageY;
		} 
		else if (e.clientY)   
		{
			mouse.y = e.clientY + document.body.scrollTop
		  		+ document.documentElement.scrollTop;
		}
		mouse.y = mouse.y - canvasElement.get(0).offsetTop;
	}
	// The arrow drawing we are rotating.
	var arrow = 
	{
		strokeColor: "#8ED6FF",
		fillColor: "#0000ff",
		x: -50,  	// Starting x
		y: -25,		// Starting y
		_radians:0,	// Rotation value required for the canvas rotate method.
		centerX: 0,	// Center x point on canvas to draw
		centerY: 0,	// Center y point on canvas to draw.
		mouse: {},	// Mouse object
		_dx:0,
		_dy:0,
		update: function()
		{
			// Distance from mouse x and center of canvas.
			this._dx = mouse.x - this.centerX; 
			// Distance from mouse y and center of canvas.
			this._dy = mouse.y - this.centerY; 
			// Radians for the canvas rotate method.
			this._radians = Math.atan2(this._dy,this._dx);
		},
		draw: function() // Draw.
		{
			// Draw off canvas
			canvas.save();
			//Translate canvas to center
			canvas.translate(this.centerX, this.centerY);
			// Rotate
			canvas.rotate(this._radians);
			// Create new drawing
			canvas.beginPath();
			// Start point top left of arrow shaft.
			canvas.moveTo(this.x, this.y);	
			// Top left of arrow shaft plus top left of arrow head.			
			canvas.lineTo(this.x + 50 , this.y);		
			canvas.lineTo(this.x + 50, this.y - 25);			
			// Arrow point.
			canvas.lineTo(this.x + 100, this.y + 25);		
			canvas.lineTo(this.x + 50, this.y + 75);	
			// Bottom left of arrow head and bottom left of arrow shaft.
			canvas.lineTo(this.x + 50, this.y + 50);	
			canvas.lineTo(this.x, this.y + 50);
			// Close the bottom of arrow shaft.			
			canvas.lineTo(this.x, this.y);	
			canvas.fillStyle = this.strokeColor;
			canvas.fill();
			canvas.strokeStyle = this.fillColor;		
			canvas.stroke();
			// Put it on the canvas
			canvas.restore();
	  	}
	};	
	// Update the model data.
	function update() 
	{
		if (isPlaying)
		{
			arrow.update();
		}
	}
	// Draw the views
	function draw() 
	{
		canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.strokeStyle = "red";
		canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.fillStyle = "#ccc";
		canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
		arrow.draw();
	}
	// JQuery ready - start here
	$(function() 
	{
		// Initialization. Since arrow is a singleton, need to set initalization values.
		arrow.centerX = canvasCenterX;
		arrow.centerY = canvasCenterY;
		arrow.mouse = mouse;
		// Timer for animation.
		setInterval(function() 
		{
			update();
			draw();
		}, 1000/FPS);
	});
</script>
</body>
</html>

This is an example of using the HTML5 canvas and using JavaScript Math.sin to produce a bobbing animation of a circle.

Demo

Download Source

This example is in one HTML document that contains all the JavaScript.

Foundation HTML5 Animation with JavaScript

JQuery is included only to detect when the document is ready and start the timer for the animation. The timer calls an update function which updates the data values for the items on the canvas. In this case it is just the animated object. The timer also calls the draw function that calls the animated object’s draw function.

I am using the Google CDN for JQuery.

This example adds the canvas node to the body dynamically in JavaScript and is just a technique. You could include the canvas tag statically.

You can view the full html file at the end of the post. I will excerpt parts to explain what is going on inside the code.

[ad name=”Google Adsense”]

Once JQuery is ready the animation timer is started. The timer calls the update and draw methods.

	// JQuery ready
	$(function() 
	{
		// Start here.
		// Timer for animation.
		setInterval(function() 
		{
			update();
			draw();
		}, 1000/FPS);
	});

This is the draw method. It simply clears the canvas, draws the canvas background and border, and then calls the draw method of the animation object called player.

	// Draw the views
	function draw() 
	{
		canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.strokeStyle = "red";
		canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.fillStyle = "#ccc";
		canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
		player.draw();
	}

The model animation data is maintained in the update function. There is the angle and the player x and y positions to update.

The player x value is the horizontal center of the canvas. That does not change in this example.

Line 57 computes the player y value. The values of 1 to -1 are computed from the angle using the Math.sin function. The angle variable increments infinitely. The Math.sin function uses the angle values as real possible angles in geometry you are accustomed to using.

The yRange value of 200 multiplied by Math.sin(angle) results in values between -200 and 200.

Adding the result to canvasCenterY, the vertical center of the canvas, creates the y value plus or minus the vertical center of the canvas.

	// Update the model data.
	function update() 
	{
		// Coordinate for x is center canvas width.
		player.x = canvasCenterX;
		// Coordinate y is the sine of the angle 
		// for a positive or negative percentage of the range 
		// using the canvas vertical for the center of the range.
		player.y = canvasCenterY + Math.sin(angle) * yRange;
		// Angle changed by speed.
		angle += speed;
	}

[ad name=”Google Adsense”]
This is the object that is being animated. It contains some basic properties for a circle and contains a method for drawing.

	var player = {
		color: "#00A",
		x: 0,  	// Starting x
		y: 0,	// Starting y
		width: 32,
		height: 32,
		radius: 20,
		draw: function() // Draw the player.
		{
			canvas.fillStyle = this.color;		
			canvas.beginPath();  
			canvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true); 
			canvas.fill();
			canvas.lineWidth = 5;
    		canvas.strokeStyle = "black";
    		canvas.stroke();
	  	}
	};	

The entire HTML document for your convenience to view and copy.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<title>HTML5 Canvas Based Animation Sine Wave Movement Using Bobbing Circle</title>
</head>
<body>
<script type='text/javascript'>
	var CANVAS_WIDTH = 480;		// Canvas width
	var CANVAS_HEIGHT = 480;	// Canvas height
	var FPS = 30;				// Frames per second
	// Canvas center points adjusted for stroke.
	var canvasCenterX = (CANVAS_WIDTH - 1) / 2;
	var canvasCenterY = (CANVAS_HEIGHT - 1) / 2;
	// Speed of movement
	var speed = .05;
	// Angle for computing cosine and sin.
	var angle = 0;
	// Range of the vertical movement.
	var yRange = 200;
	// Create a canvas element variable.
	var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
	  "' height='" + CANVAS_HEIGHT + "'></canvas");
	// Reference to the canvas 2d context.
	var canvas = canvasElement.get(0).getContext("2d");
	// Dynamically append a canvas element to the body tag.
	canvasElement.appendTo('body');	
	// Object defining the player we are moving.
	var player = {
		color: "#00A",
		x: 0,  	// Starting x
		y: 0,	// Starting y
		width: 32,
		height: 32,
		radius: 20,
		draw: function() // Draw the player.
		{
			canvas.fillStyle = this.color;		
			canvas.beginPath();  
			canvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true); 
			canvas.fill();
			canvas.lineWidth = 5;
    		canvas.strokeStyle = "black";
    		canvas.stroke();
	  	},
	};	
	// Update the model data.
	function update() 
	{
		// Coordinate for x is center canvas width.
		player.x = canvasCenterX;
		// Coordinate y is the sine of the angle 
		// for a positive or negative percentage of the range 
		// using the canvas vertical for the center of the range.
		player.y = canvasCenterY + Math.sin(angle) * yRange;
		// Angle changed by speed.
		angle += speed;
	}
	// Draw the views
	function draw() 
	{
		canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.strokeStyle = "red";
		canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.fillStyle = "#ccc";
		canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
		player.draw();
	}
	// JQuery ready
	$(function() 
	{
		// Start here.
		// Timer for animation.
		setInterval(function() 
		{
			update();
			draw();
		}, 1000/FPS);
	});
</script>
</body>
</html>

This takes my first example animating a filled circle rotating around the center point to a user interaction level using JQuery Hotkeys. JQuery Hotkeys is a plug-in that lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination using JQuery.

Foundation HTML5 Animation with JavaScript

This version of the animation allows for start and stop playing. It also includes reversing the direction of rotation from clockwise to counter clockwise and back again. Finally I decided to allow increasing and decreasing the speed of rotation.

Another change from the previous example is to move as much relevant functionality as possible into the animated object called player. For example the player object is responsible for its own data computations and for interpreting key events.

The events in the animation are the timer and key events. The timer event calls the update and draw functions at the desired frame rate. The update and draw functions then call the same functions for all animation objects: we only have one animation object at this point.

Demo

Download

• Source. This includes the 0.7.9 minimized version of JQuery Hotkeys.
• JQuery Hotkeys Github in case you want the latest version.

[ad name=”Google Adsense”]
This is the html5 head section. Line 4 brings in JQuery from the Google CDN. Line 5 references a local copy of JQuery Hotkeys. In this case the 0.7.9 minimized version.

The html structure is expanded to include elements for a main title, a subtitle and keyboard instructions for the animation. The internal style on lines 9 – 27 provide formatting for these new structural elements.

<!DOCTYPE HTML>
<html>
<head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.hotkeys-0.7.9.min.js"></script>
<title>HTML5 Canvas Based Animation Circular Movement Start, Stop, Reverse, Faster, Slower</title>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
	body {
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
	}
	#titleDiv{
		font-family:Verdana, Geneva, sans-serif;
	}
	#titleHeadDiv{
		font-size:16px;
	}
	#titleSub1Div{
		font-size:14px;
	}
	#instructionsDiv{
		margin-top:10px;
		margin-bottom:5px;	
	}
</style>
</head>
<body>
<div id="titleDiv">
    <div id="titleHeadDiv">HTML5 Canvas Based Animation Circular Movement</div>
    <div id="titleSub1Div">Key Controlled Start, Stop, Reverse, Faster, Slower</div>
</div>
<div id="instructionsDiv">Keys: P=Play, S=Stop, R=Reverse, Up=Faster, Down=Slower</div>

<script type='text/javascript'>

To keep the code readable, lines 38 – 57 define constants.

Line 54 – 68 are dynamically appending the canvas element to the body element. Then the canvas variable on line 61 represents the drawing context for the code.

// Canvas width
	var CANVAS_WIDTH = 480;	
	// Canvas height	
	var CANVAS_HEIGHT = 480;	
	// Rotation direction constants
	var CLOCKWISE = 'clockwise';
	var COUNTER_CLOCKWISE = 'counter_clockwise';
	// Key name constants
	var KEY_NAME_PLAY = 'p';
	var KEY_NAME_STOP = 's';
	var KEY_NAME_REVERSE = 'r';
	var KEY_NAME_FASTER = "up";
	var KEY_NAME_SLOWER = "down";
	// Constants to match JQuery Hotkeys event value type.
	var KEY_TYPE_UP = "keyup";
	var KEY_TYPE_DOWN = "keydown";
	var FPS = 30;				// Frames per second
	// Canvas center points adjusting for stroke.
	var canvasCenterX = (CANVAS_WIDTH - 1) / 2;
	var canvasCenterY = (CANVAS_HEIGHT - 1) / 2;
	// Create a canvas element variable.
	var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
	  "' height='" + CANVAS_HEIGHT + "'></canvas");
	// Reference to the canvas 2d context.
	var canvas = canvasElement.get(0).getContext("2d");
	// Dynamically append a canvas element to the body tag.
	canvasElement.appendTo('body');	
	// Object defining the player we are rotating.

[ad name=”Google Adsense”]
The player object is the bulk of the code to study.

Lines 65 – 77 define a series of properties for the player object. The player simply rotates around a point.

This example aimed at making the animation objects more independent. For example the speed property allows an independent speed.

	var player = {
		color: "#00A",
		x: 0,  		// Starting x
		y: 0,		// Starting y
		radius: 20,	// Radius of the player
		direction: CLOCKWISE,	// CLOCKWISE or COUNTER_CLOCKWISE
		angle:0,				// Degrees of rotation for sin and cosine
		speed: .05,				// Pixels per frame
		speedChange: .001,		// Pixels per frame
		speedMax: .18,			// Pixels per frame
		speedMin: .005,			// Pixels per frame
		radiusRotation:200,		// Rotation circle radius
		isPlaying: false,		// True false state animating

The player draw method is called from the main animation loop. The method uses the player object’s properties to draw the player. One bare number for lineWidth could have been added to properties.

		draw: function() // Draw the player.
		{
			canvas.fillStyle = this.color;		
			canvas.beginPath();  
			canvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true); 
			canvas.fill();
			canvas.lineWidth = 5;
    		canvas.strokeStyle = "black";
    		canvas.stroke();
	  	},

The init method for the player object computes the starting x and y positions. The main animation init function calls the player init method.

		init: function()
		{
			this.x = canvasCenterX + Math.cos(this.angle) * this.radiusRotation;
			this.y = canvasCenterY + Math.sin(this.angle) * this.radiusRotation;
		},

Handling keyboard input is central to this example. The main code captures the key input using JQuery Hotkeys. There the player object keyEvent method is called. It receives the keyType representing either a key down or key up state and the name of the key.

The key down state is not checked but is the state for the play, stop, faster and slower key names. The key down state causes JQuery Hotkeys to repeat the key while it is down. This is acceptable for the play and stop key although we might want to limit those to a key up only state as you will see we did for the reverse key. The faster and slower keys we want to accept repetition if they are held down as we would with an accelerator or brake.

For the reverse key, the key up state is used. If the key down state was used, the reverse key would repeat creating a chaotic result for direction.

		keyEvent: function(keyType, keyName)
		{
			// Set to playing state.
			if (keyName == KEY_NAME_PLAY)
			{
				this.isPlaying = true;
			}
			// Set to stopped state
			else if (keyName == KEY_NAME_STOP)
			{
				this.isPlaying = false;
			}
			// Increase speed if playing
			else if (keyName == KEY_NAME_FASTER && this.isPlaying)
			{
				this.speed += this.speedChange;
				this.speed = Math.min(this.speedMax, this.speed);
			}
			// Decrease speed if playing
			else if (keyName == KEY_NAME_SLOWER && this.isPlaying)
			{
				this.speed -= this.speedChange;
				this.speed = Math.max(this.speedMin, this.speed);
			}
			// Up state of the key.
			if (keyType == KEY_TYPE_UP)
			{
				// Change from clockwise to counter clockwise rotation
				if (keyName == KEY_NAME_REVERSE && this.direction == CLOCKWISE)
				{
					player.direction = COUNTER_CLOCKWISE;
				}
				// Change from counter clockwise rotation to clockwise rotation
				else if (keyName == KEY_NAME_REVERSE && this.direction == COUNTER_CLOCKWISE)
				{
					player.direction = CLOCKWISE;
				}
			}			
		},

The update method handles computation of the model data for the player object. Assuming the player is moving, identified by the isPlaying property, the new position on the rotation perimeter is computed using standard trigonometry.

Also the direction is handled by simply incrementing or decrementing the angle property.

		update: function()
		{
			// Update player data model if playing.
			if (this.isPlaying)
			{
				// Compute the triangle coordinates from the center of rotation
				player.x = canvasCenterX + Math.cos(this.angle) * this.radiusRotation;
				player.y = canvasCenterY + Math.sin(this.angle) * this.radiusRotation;
				// Keep moving the rotation clockwise.
				if (this.direction == CLOCKWISE)
				{
					this.angle += this.speed;
				}
				// Keep moving the rotation counter clockwise.
				else if(this.direction == COUNTER_CLOCKWISE)
				{
					this.angle -= this.speed;
				}
			}
		}
	};	

This is the main animation init function. The task is to initialize all components. The JQuery Hotkeys are initialized here. The player object has its own init method.

The JQuery Hotkeys for the game are defined here. This is the syntax to listen for key events. Notice the distinction for listening to key down and key up states for each key. As mentioned above the key down states repeat so were useful for all but the reverse key where the key up state was captured.

	// Initialize game
	function init()
	{
		// Set keys for play
		$(document).bind(KEY_TYPE_DOWN, KEY_NAME_PLAY, keyEvent); 
		$(document).bind(KEY_TYPE_DOWN, KEY_NAME_STOP, keyEvent); 
		$(document).bind(KEY_TYPE_UP, KEY_NAME_REVERSE, keyEvent); 	
		$(document).bind(KEY_TYPE_DOWN, KEY_NAME_FASTER, keyEvent); 
		$(document).bind(KEY_TYPE_DOWN, KEY_NAME_SLOWER, keyEvent); 
		player.init();
	}

[ad name=”Google Adsense”]
The init function registers the keyEvent function for the keys JQuery Hotkeys processes.

We do a bit of conversion of the received event information to make it more readable to our code by creating a key name literal from the keyCode event property.

The final step is to call the keyEvent method on our only player object and it handles the key information accordingly.

	// Evaluate key input
	function keyEvent(evt)
	{
		// Animation name for the key pressed assumed to be the char name.
		var keyName = String.fromCharCode(evt.keyCode).toLowerCase();
		// Up arrow key
		if (evt.keyCode == 38)
		{
			keyName = KEY_NAME_FASTER;	
		}
		// Down arrow key
		if (evt.keyCode == 40)
		{
			keyName = KEY_NAME_SLOWER;	
		}
		// Call animation object keyEvent methods.
		player.keyEvent(evt.type,keyName);
		
	}

The main update and draw functions are called with the animation timer.

The update function recomputes the model data. In this case there is just updating the player model data.

For the draw method, the canvas draw operations are included and then the player draw method is called.

The separation of these two allows for a different timing solution that would separate the processing timing of the data and the drawing.

	// Update the model data.
	function update() 
	{  
		// Call the animation object update events.
		player.update();
	}
	// Draw the views
	function draw() 
	{
		//Canvas object clear and draw background and border.
		canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.strokeStyle = "red";
		canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.fillStyle = "#ccc";
		canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
		// Call the animation object update events.
		player.draw();
	}

This is were the animation starts. Once JQuery fires its ready function, the animation init method is called and then a timer interval is calls the update and draw functions to drive the animation.

	// JQuery ready
	$(function() 
	{
		// Start here.
		
		// Initialize components
		init();
		// Timer for animation.
		setInterval(function() 
		{
			update();
			draw();
		}, 1000/FPS);
			
	});

</script>
</body>
</html>

Started dabbling with the HTML5 canvas to create animations. This example animates a filled circle rotating around the center point. I kept the example as simple as possible while anticipating some of the coding design required for a more complex build.

A build on this example that accepts user keyboard input to control the animation play, start, stop, direction and speed is available in this follow up post.

Foundation HTML5 Animation with JavaScript

One item that is more sophisticated is that the canvas tag is dynamically created in the Javascript code on lines 35 – 40. This is not necessary as the tag could be inserted into the html and referenced with an id.

Another is including JQuery from the Google CDN. Listening to the body onLoad method is a substitute.

Also I included the script tag after the html content. The script tag could go in the head section. Placing after the html in the body tag allows html content to load and style before the script code is parsed.

Demo

Source

This is the html5 head section. There is an internal style on lines 8 – 17 for the html in the document. Line 4 brings in JQuery from the Google CDN. Line 20 is the display title for the page.

<!DOCTYPE HTML>
<html>
<head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<title>HTML5 Canvas Circular Movement Based Animation</title>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
	body {
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
	}
	#titleDiv{
		font-family:Verdana, Geneva, sans-serif;
		font-size:16px;
	}
</style>
</head>
<body>
<div id="titleDiv">HTML5 Canvas Circular Movement Based Animation</div>
<script type='text/javascript'>

The animation key variables are definite and initialized here to keep as many bare numbers out of the code as possible.

The canvas has a border. So there is some computational needs on lines 26-27 to take the border out in computing the center point. May not make a difference in this example, but is helpful for a future example where that boundary is important.

	var CANVAS_WIDTH = 480;		// Canvas width
	var CANVAS_HEIGHT = 480;	// Canvas height
	var FPS = 30;				// Frames per second
	// Canvas center points adjusting for stroke.
	var canvasCenterX = (CANVAS_WIDTH - 1) / 2;
	var canvasCenterY = (CANVAS_HEIGHT - 1) / 2;
	// Radius of the rotation
	var radius = 200;
	// Speed of movement
	var speed = .05;
	// Angle for computing cosine and sin.
	var angle = 0;
	// Create a canvas element variable.
	var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
	  "' height='" + CANVAS_HEIGHT + "'></canvas");
	// Reference to the canvas 2d context.
	var canvas = canvasElement.get(0).getContext("2d");
	// Dynamically append a canvas element to the body tag.
	canvasElement.appendTo('body');

[ad name=”Google Adsense”]
This defines the object that moves in the circular rotation. The name player is arbitrary but hints at a way to define objects for a game.

Later we will see the animation loop. The animation loop call the draw function of the items in the animation. So you see the draw function for the player on line 49. This is how to draw a filled circle with a border using the html5 canvas api.

Additionally each object has an init function that is called to initialize the animation objects. For this example the init function for the player object is empty. It could be used for an initial placement of an object for example.

Line 59 shows the master init function that would call all necessary component init functions.

	
	// Object defining the player we are rotating.
	var player = {
		color: "#00A",
		x: 0,  	// Starting x
		y: 0,	// Starting y
		width: 32,
		height: 32,
		radius: 20,
		draw: function() // Draw the player.
		{
			canvas.fillStyle = this.color;		
			canvas.beginPath();  
			canvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true); 
			canvas.fill();
			canvas.lineWidth = 5;
    		        canvas.strokeStyle = "black";
    		        canvas.stroke();
	  	},
		init: function()
		{
		}
	};	
	// Initialize game
	function init()
	{
		player.init();
	}

[ad name=”Google Adsense”]
The update function updates the model data. The animation timer will call this for each animation interval.

Primarily the computations are a right triangle from the center point to the place for the player object to be drawn based on the current angle. This is the x and y where the leg and hypotenuse are based on the angle.

	// Update the model data.
	function update() 
	{  
		// Compute the triangle coordinates from the center of rotation
		player.x = canvasCenterX + Math.cos(angle) * radius;
		player.y = canvasCenterY + Math.sin(angle) * radius;
		// Keep moving the rotation. Use -= for reverse rotation.
		angle += speed;
	}

This is the view being drawn. It draws anything that has to do with the overall canvas. However you could make that a class or object like player and give it a draw method.

Line 85 shows the player draw method being called.

	// Draw the views
	function draw() 
	{
		canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.strokeStyle = "red";
		canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		canvas.fillStyle = "#ccc";
		canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
		player.draw();
	}

[ad name=”Google Adsense”]
This is the start of the script and the heart of the animation. Once JQuery is ready the animation init function is called. Next a Javascript interval is started to call the animation update method to update the data and then the animation draw method to redraw the view.

	// JQuery ready
	$(function() 
	{
		// Start here.
		init();
		// Timer for animation.
		setInterval(function() 
		{
			update();
			draw();
		}, 1000/FPS);
			
	});

</script>
</body>
</html>