Visual studio feeds

All Visual Studio blogs in one place


Enter your email address:

Delivered by FeedBurner

Increase your website traffic with



Anti-spam: How many eyes has a typical person?

Follow us on FB


Canvas Animations in HTML5

AddThis Social Bookmark Button
HTML5’s Canvas and CanvasRenderingContext2d bring something to HTML5 that has long been missing from HTML: the ability to draw pixels into a browser window. I wrote about the canvas API in a previous post entitled Making HTML5 Come Alive with the Canvas API. This time, I’d like to build on the previous article by exploring a subject for which HTML5 provides no native support: canvas animations. Silverlight has a robust animation engine built in that makes it easy to make objects move around the screen. HTML5 does not, but you can use timer functions to move objects
around by repositioning them at regular intervals. But because HTML5’s canvas API is an immediate-mode drawing API (as opposed to Silverlight’s retained-mode API), moving an object from one position to another requires you to erase it from its current position before drawing it in its new position. Erase, draw, repeat – that’s the basic technique for animating movement in HTML5. For a demonstration, point an HTML5 browser such as Internet Explorer 9, Firefox 4, Chrome 10, Opera 11, or Safari 5 to You’ll see a page containing a red ball that measures 100 pixels in diameter bouncing...(Read whole news on source site)

Home : Blog List : Jeff Prosise's Blog : Canvas Animations in HTML5