Create a Visual Library of Images in HTML5 Canvas: Animations and Handling Multiple Devices

By HTMLGoodies Staff  |  eMail Email    Print Print  Post a comment

written by David Catuhe

Last week in our tutorial on How To Create a Visual Library of Images in HTML5 Canvas, we told you about mouse management and state storage. In this week's tutorial, we're going to discuss animations, how to handle multiple devices, and will conclude the tutorial.


To add even more dynamism to our application we will allow our users to double-click on a card to zoom and focus on it.

Our system should animate three values: the two offsets (X, Y) and the zoom. To do this, we will use a function that will be responsible of animating a variable from a source value to a destination value with a given duration:

  1. var AnimationHelper = function (root, name) {
  2. var paramName = name;
  3. this.animate = function (current, to, duration) {
  4. var offset = (to - current);
  5. var ticks = Math.floor(duration / 16);
  6. var offsetPart = offset / ticks;
  7. var ticksCount = 0;
  8. var intervalID = setInterval(function () {
  9. current += offsetPart;
  10. root[paramName] = current;
  11. ticksCount++;
  12. if (ticksCount == ticks) {
  13. clearInterval(intervalID);
  14. root[paramName] = to;
  15. }
  16. }, 16);
  17. };
  18. };

The use of this function is:

  1. // Prepare animations parameters
  2. var zoomAnimationHelper = new AnimationHelper(visuControl, "zoom");
  3. var offsetXAnimationHelper = new AnimationHelper(visuControl, "offsetX");
  4. var offsetYAnimationHelper = new AnimationHelper(visuControl, "offsetY");
  5. var speed = 1.1 - visuControl.zoom;
  6. zoomAnimationHelper.animate(visuControl.zoom, 1.0, 1000 * speed);
  7. offsetXAnimationHelper.animate(visuControl.offsetX, targetOffsetX, 1000 * speed);
  8. offsetYAnimationHelper.animate(visuControl.offsetY, targetOffsetY, 1000 * speed);

The advantage of the AnimationHelper function is that it is able to animate as many parameters as you wish (and that only with the setTimer function!)

Handling multi-devices

Finally we will ensure that our page can also be seen on tablets PC and even on phones.

To do this, we will use a feature of CSS 3: The media-queries. With this technology, we can apply style sheets according to some queries such as a specific display size:

  1. <link href="Content/full.css" rel="stylesheet" type="text/css" />
  2. <link href="Content/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" />
  3. <link href="Content/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" />

Here we see that if the screen width is less than 480 pixels, the following style sheet will be added:

  1. #legal
  2. {
  3. font-size: 8px;
  4. }
  5. #title
  6. {
  7. font-size: 30px !important;
  8. }
  9. #waitText
  10. {
  11. font-size: 12px;
  12. }
  13. #bolasLogo
  14. {
  15. width: 48px;
  16. height: 48px;
  17. }
  18. #pictureCell
  19. {
  20. width: 48px;
  21. }

This sheet will reduce the size of the header to keep the site viewable even when the browser width is less than 480 pixels (for example, on a Windows Phone):image


HTML 5 / CSS 3 / JavaScript and Visual Studio 2010 allow to develop portable and efficient solutions (within the limits of browsers that support HTML 5 of course) with some great features such as hardware accelerated rendering.

This kind of development is also simplified by the use of frameworks like jQuery.

Also, I am especially fan of JavaScript that turns out to be a very powerful dynamic language. Of course, C# or VB.NET developers have to change theirs reflexes but for the development of web pages it's worth.

In conclusion, I think that the best to be convinced is to try!

To go further

This article was reprinted with permission from Microsoft Corporation. The original is available here. This site does business with Microsoft Corporation.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • HTML5 eBook

    HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.
  • Html5 Logo