HTML5 and Canvas can be a very powerful tool if you know how to use it, unfortunately it is pretty new and so getting information on how to perform certain animations is few and far between. My goal here is to create a nice little animated clipping path to show some lines, as drawing lines in canvas proved to be labor intensive for the browser resulting in loss of fps just after a few lines. Another issue was that the lines that I did manage to draw were choppy, and to create a good tween took quite a bit of math (diagonal lines are tricky because you have to draw it px by px and if you don’t increment the X and Y the right amount, your line hits one of those first and becomes a diagonal line with a straight line attached). For me this was a really long process to figure out, there wasn’t much documentation out there on how to animate a clipping path so it took a lot of trial and error. That’s why I’m making this short tutorial on how to draw an animated clipping mask to say, reveal some lines or something. To start off, lets go ahead and make our canvas.

<canvas  id="slide29Canvas2" width="970px" height="600px"></canvas>

Ok, so now that we have our canvas down, lets go ahead and write some javascript up – then I will go line by line and explain exactly whats going on. Here is the JS with the comments explaining how it works.

// Grabs the canvas element we made above
var ca1=document.getElementById("slide29Canvas1");

// Defines the 2d thing, standard for making a canvas
var c1=ca1.getContext("2d");

// Creates an image variable to hold and preload our image (can't do animations on an image unless its fully loaded)
var img1 = document.createElement('IMG');

// Loads image link into the img element we created above
img1.src = "http://tajvirani.com/wp-content/uploads/2012/03/slide29-bg_1.png";

// Creates the first save event, this gives us a base to clear our clipping / mask to since you can't just delete elements.
c1.save();

// Our function for when the image loads
img1.onload = function () {

	// First call to our canvas drawing function, the thing that is going to do all the work for us.
        // You can just call the function but I did it through a timer
	setTimeout(function() { drawc1r(0); },5);

        // The function that is doing all the heavy lifting. The reason we are doing a function is because
        // to make an animation we have to draw the circle (or element) frame by frame, to do this manually would be to time
        // intensive so we are just going to create a loop to do it. 'i' stands for the radius of our border
        // so over time our radius is going to get bigger and bigger.
	function drawc1r(i) {

        // Creates a save state. Imagine a save state like an array, when you clear one it pops last element in the array off the stack
        // When you save, it creates an element at the top of the stack. So if we cleared without making new ones, we would end up with nothing on our stage.
	c1.save();

        // This clears everything off the stage, I do this because our image has transparency, and restore() (the thing that pops one off the stack)
        // Doesn't clear off images, and so if we stick an image on the stage over and over, the transparency will stack on top of each other and
        // That isn't quite what we want.
	c1.clearRect(0, 0, ca1.width, ca1.height);

        // Adds one to the radius making the circle a little bigger with every step
	i++;

        // Tells canvas we are going to start creating an item on the stage - it can be a line, a rectangle or any shape you draw, but whatever
        // after this path will be added to the clip when its called. I can have 3 rectangles drawn and that would make a clip.
	c1.beginPath();

        // Can't make a true circle, so we make an arced line that happens to trace a circle - 'i' is used to define our radius.
	c1.arc(853, 320, i, 0, 2 * Math.PI, false);

        // After everything is defined, we make a clip area out of it.
	c1.clip();

        // Now that we have the clip added to it, we are going to add the image to the clip area.
	c1.drawImage(img1, 0, 0);

        // This pops one off the stack which gets rid of the clip so we can enlarge it and make it again on the next pass
	c1.restore();

        // Here is the final size of the circle, I want it to grow the circle until it hits 800 so we set a timeout to run this function again
        // until we get the size we want. The time in milliseconds pretty much defines your framerate for growing the circle. There are other
        // methods for doing this that give you better frame rates, but I didn't have much luck with them so I'm not going to include them.
	if(i < 800) {
		setTimeout(function() { drawc1r(i); },5);
	}

}

Here is an example of what we just made: (oh and just realized, had to wrap this whole thing in a jquery ready function to not throw an error)      

So I came across this tutorial that goes through some basic principles on how to make a mobile app. It all uses HTML 5 which is sweet, but the code is made primarily for mobile browsers, this way you don’t have to go through something like the app store and you can use your general web knowledge to make something cool. There have been a lot of updates to HTML 5 with some cool little pieces of candy that makes coding easier and more compact for us. Form fields have gotten a little bit of a makeover, you remember those times you had to write javascript to put in text to a field and when the user clicked it disappeared? well now that is built into the form field. Also built in is Geo location, where you can deduce where your user is on the globe when he accesses your app, and a few other things for your scripting pleasure. Feel free to check out the tutorial I found here that teaches you how to build a simple mobile application.