Create a Visual Image Library Using HTML5 Canvas: HTML5 Code and Data Gathering

By HTMLGoodies Staff  |  eMail Email    Print Print  

written by David Catuhe

Last week in our tutorial on How To Create a Visual Library of Images in HTML5 Canvas, we provided you with an overview of an application that will allow us to display a Magic the Gathering cards collection, and discussed the tools we will use. This week we will show you the HTML5 code that is used, and we will delve into data gathering.

The HTML 5 page

Our page will be built around an HTML 5 canvas which will be used to draw the cards:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Bolas Lenses</title>
  6.     <link href="Content/full.css" rel="stylesheet" type="text/css" />
  7.     <link href="Content/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" />
  8.     <link href="Content/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" />
  9.     <script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12.     <header>
  13.         <div id="legal">
  14.             Cards scanned by <a href="http://www.slightlymagic.net/">MWSHQ Team</a><br />
  15.             Magic the Gathering official site : <a href="http://www.wizards.com/Magic/TCG/Article.aspx?x=mtg/tcg/products/allproducts">
  16.                 http://www.wizards.com/Magic</a>
  17.             <div id="cardsCount">
  18.             </div>
  19.         </div>
  20.         <div id="leftHeader">
  21.             <img id="pictureCell" src="/Content/MTG Black.png" alt="Bolas logo" id="bolasLogo" />
  22.             <div id="title">
  23.                 Bolas Lenses
  24.             </div>
  25.         </div>
  26.     </header>
  27.     <section>
  28.         <img src="Content/Back.jpg" style="display: none" id="backImage" alt="backImage"
  29.             width="128" height="128" />
  30.         <canvas id="mainCanvas">
  31.                     Your browser does not support HTML5 canvas.
  32.         </canvas>
  33.         <div id="stats" class="tooltip">
  34.         </div>
  35.         <div id="waitText" class="tooltip">
  36.             Loading data...
  37.         </div>
  38.     </section>
  39.     <!--Scripts-->
  40.     <script src="Bolas/bolasLenses.animations.js" type="text/javascript"></script>
  41.     <script src="Bolas/bolasLenses.mouse.js" type="text/javascript"></script>
  42.     <script src="Bolas/bolasLenses.cache.js" type="text/javascript"></script>
  43.     <script src="Bolas/bolasLenses.js" type="text/javascript"></script>
  44. </body>
  45. </html>

If we dissect this page, we can note that it is divided into two parts:

  • The header part with the title, the logo and the special mentions
  • The main part (section) holds the canvas and the tooltips that will display the status of the application. There is also a hidden image (backImage) used as source for not yet loaded cards.

To build the layout of the page, a style sheet (full.css) is applied. Style sheets are a mechanism used to change the tags styles (in HTML, a style defines the entire display options for a tag):

  1. html, body
  2. {
  3.     height: 100%;
  4. }
  6. body
  7. {
  8.     background-color: #888888;
  9.     font-size: .85em;
  10.     font-family: "Segoe UI, Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
  11.     margin: 0;
  12.     padding: 0;
  13.     color: #696969;
  14. }
  16. a:link
  17. {
  18.     color: #034af3;
  19.     text-decoration: underline;
  20. }
  22. a:visited
  23. {
  24.     color: #505abc;
  25. }
  27. a:hover
  28. {
  29.     color: #1d60ff;
  30.     text-decoration: none;
  31. }
  33. a:active
  34. {
  35.     color: #12eb87;
  36. }
  38. header, footer, nav, section
  39. {
  40.     display: block;
  41. }
  43. table
  44. {
  45.     width: 100%;
  46. }
  48. header, #header
  49. {
  50.     position: relative;
  51.     margin-bottom: 0px;
  52.     color: #000;
  53.     padding: 0;
  54. }
  56. #title
  57. {
  58.     font-weight: bold;
  59.     color: #fff;
  60.     border: none;
  61.     font-size: 60px !important;
  62.     vertical-align: middle;
  63.     margin-left: 70px
  64. }
  66. #legal
  67. {
  68.     text-align: right;
  69.     color: white;
  70.     font-size: 14px;
  71.     width: 50%;
  72.     position: absolute;
  73.     top: 15px;
  74.     right: 10px
  75. }
  77. #leftHeader
  78. {
  79.     width: 50%;
  80.     vertical-align: middle;
  81. }
  83. section
  84. {
  85.     margin: 20px 20px 20px 20px;
  86. }
  88.     #mainCanvas{
  89.     border: 4px solid #000000;
  90. }
  92. #cardsCount
  93. {
  94.     font-weight: bolder;
  95.     font-size: 1.1em;
  96. }
  98. .tooltip
  99. {
  100.     position: absolute;
  101.     bottom: 5px;
  102.     color: black;
  103.     background-color: white;
  104.     margin-right: auto;
  105.     margin-left: auto;
  106.     left: 35%;
  107.     right: 35%;
  108.     padding: 5px;
  109.     width: 30%;
  110.     text-align: center;
  111.     border-radius: 10px;
  112.     -webkit-border-radius: 10px;
  113.     -moz-border-radius: 10px;
  114.     box-shadow: 2px 2px 2px #333333;
  115. }
  117. #bolasLogo
  118. {
  119.     width: 64px;
  120.     height: 64px;
  121. }
  123. #pictureCell
  124. {
  125.     float: left;
  126.     width: 64px;
  127.     margin: 5px 5px 5px 5px;
  128.     vertical-align: middle;
  129. }

Thus, this sheet is responsible for setting up the following display:


Style sheets are powerful tools that allow an infinite number of displays. However, they are sometimes complicated to setup (for example if a tag is affected by a class, an identifier and its container). To simplify this setup, the development bar of Internet Explorer 9 is particularly useful because we can use it to see styles hierarchy that is applied to a tag.
For example let’s take a look at the waitText tooltip with the development bar. To do this, you must press F12 in Internet Explorer and use the selector to choose the tooltip:


Once the selection is done, we can see the styles hierarchy:


Thus, we can see that our div received its styles from the body tag  and the .tooltip entry of the style sheet.

With this tool, it becomes possible to see the effect of each style (which can be disabled). It is also possible to add new style on the fly.

Another important point of this window is the ability to change the rendering mode of Internet Explorer 9. Indeed, we can test how, for example, Internet Explorer 8 will handle the same page. To do this, go to the [Browser mode] menu and select the engine of Internet Explorer 8. This change will especially impact our tooltip as it uses border-radius (rounded edge) and box-shadow that are features of CSS 3:

image image

Internet Explorer 9

Internet Explorer 8

Our page provides a graceful degradation  as it still works (with no annoying visual difference) when the browser does not support all the required technologies.

Now that our interface is ready, we will take a look at the data source to retrieve the cards to display.

Data gathering

The server provides the cards list using JSON format on this URL:


It takes one parameter (colorString) to select a specific color (0 = all).

When developing with JavaScript, there is a good reflex to have (reflex also good in other languages too, but really important in JavaScript): one must ask whether what we want to develop has not been already done in an existing framework.

Indeed, there is a multitude of open source projects around JavaScript. One of them is jQuery which provides a plethora of convenient services.

Thus, in our case to connect to the URL of our server and get the cards list, we could go through a XmlHttpRequest and have fun to parse the returned JSON. Or we can use jQuery Sourire.

So we will use the getJSON function which will take care of everything for us:

  1. function getListOfCards() {
  2.     var url = "http://bolaslenses.catuhe.com/Home/ListOfCards/?jsoncallback=?";
  3.     $.getJSON(url, { colorString: "0" }, function (data) {
  4.         listOfCards = data;
  5.         $("#cardsCount").text(listOfCards.length + " cards displayed");
  6.         $("#waitText").slideToggle("fast");
  7.     });
  8. }

As we can see, our function stores the cards list in the listOfCards variable and calls two jQuery functions:

  • text that change the text of a tag
  • slideToggle that hides (or shows) a tag by animating its height

The listOfCards list contains objects whose format is:

  • ID: unique identifier of the card
  • Path: relative path of the card (without the extension)

It should be noted that the URL of the server is called with the “?jsoncallback=?” suffix. Indeed, Ajax calls are constrained in terms of security to connect only to the same address as the calling script. However, there is a solution called JSONP that will allow us to make a concerted call to the server (which of course must be aware of the operation). And fortunately, jQuery can handle it all alone by just adding the right suffix.

Once we have our cards list, we can set up the pictures loading and caching.

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

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • Html5 Logo