How to Create a Visual Library of Images in HTML5 Canvas

By HTMLGoodies Staff  |  eMail Email    Print Print  Post a comment

written by David Catuhe

As a user interface fan, I could not miss the development with HTML 5.

So the goal of this post is to walk through a graphic application that uses JavaScript and HTML 5. We will see through examples one way (among others) to develop this kind of project.

Application overview

We will produce an application that will let us display a Magic the Gathering ©(courtesy of www.wizards.com/Magic) cards collection. Users will be able to scroll and zoom using the mouse (like Bing Maps, for example).

image

You can see the final result here: http://bolaslenses.catuhe.com

The project source files can be downloaded here: http://www.catuhe.com/msdn/bolaslenses.zip

Cards are stored on Windows Azure Storage and use the Azure Content Distribution Network (CDN : a service that deploys data near the final users) in order to achieve maximum performances. An ASP.NET service is used to return cards list (using JSON format).

image

Tools

To write our application, we will use Visual Studio 2010 SP1 with Web Standards Update. This extension adds IntelliSense support in HTML 5 page (which is a really important thing Sourire).

So, our solution will contain an HTML 5 page side by side with .js files (these files will contain JavaScript scripts). About debug, it is possible to set a breakpoint directly in the .js files under Visual Studio. It is also possible to use the developer bar of Internet Explorer 9 (use F12 key to display it).

image

Debug with Visual Studio 2010

image

Debug with Internet Explorer 9 (F12/Developer bar)

So, we have a modern developer environment with IntelliSense and debug support. Therefore, we are ready to start and first of all, we will write the HTML 5 page.

image

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