How to Use HTML5 and JavaScript to Canvas Your Web Page - dummies

How to Use HTML5 and JavaScript to Canvas Your Web Page

By John Paul Mueller

HTML5 includes the concept of a canvas. As with the artist’s version of the physical canvas, you use the HTML5 canvas to draw images onscreen. Using the canvas makes it easier to manage various sorts of drawings that you need to convey information to the user.

What the HTML5 canvas does

A canvas is simply a drawing area onscreen. To create a canvas, the browser you interact with must support HTML5. This means that you need to use newer browser versions, such as Internet Explorer 9.

You also need to have an understanding of the source of the canvas and how the canvas works with the client’s browser. The canvas relies on an actual <canvas> tag. To draw something onscreen, you provide an id, a height, and a width property for the <canvas> tag like this:

<canvas id="MyCanvas"
    width=600 />

The size of the canvas is always in pixels. When you have a canvas to use, you can create a context to it by obtaining a reference to the canvas element and calling getContext() with the type of context you want, such as 2D. The context lets you use various drawing commands to create graphics onscreen.

Most tutorials assume that the client relies on local JavaScript functionality to perform the task. A simple application could use this approach, but most of the applications you’ll create will rely on server-based canvases. In this case, you supply a <div> as a container to hold the <canvas> that the server sends to the client.

The advantage of this approach is that the server can create a wealth of graphics for the client and send the cached <canvas> tags to every client that needs them — creating an efficient method for sharing graphics. Many developers find this approach confusing.

How to create a simple Google API application

Many organizations use maps for all sorts of interesting purposes. This article provides some additional ideas on how you can use the Google Maps API with your browser-based application.

Obtain a developer key

To use this example, you must obtain a developer key. Google provides two kinds of keys: paid and free. You need only the free key for this example. The paid key does provide considerably more flexibility, and you’ll likely need it for any full-fledged application you create.

However, for experimentation purposes, the free key works just fine. Make sure you understand the terms of service fully before you begin working with the Google Maps API. You can also find some additional assistance in using the Google Maps API with JavaScript.

Create the application

It’s best to create the code for this example in several steps. The first is to add the usual jQuery references. In addition, you also need to add a reference to the Google Maps API, as shown here.

<script type="text/javascript"
  src=" Key Here&sensor=false">

This example won’t work at all unless you replace the words, Your Key Here, with the key that you receive from Google. Consequently, this particular step is important because it’s the one step you must perform.

Now that you have all the required references in place, it’s time to create a canvas to draw the map. The canvas is simply a <div> with an id: <div id=”MapCanvas”></div>. You must provide style information that gives the <div> size or else the map won’t appear onscreen, even when Google sends it to you. The example uses the following style information:

  height: 90%;

In addition to the canvas, the example provides two text boxes for input and a button that you can use to request a new map. There isn’t anything too complex about the interface, but it gets the job done. The code for this example uses many of the jQuery and jQuery UI tricks:

   // Track the current latitude using a
   // spinner control.
   var Latitude = $("#latitude").spinner(
      min: -90,
      max: 90,
      step: .1,
      change: function(event, ui)
        if (Latitude.spinner("value") < -90)
         Latitude.spinner("value", -90);
        if (Latitude.spinner("value") > 90)
         Latitude.spinner("value", 90);
   // Track the current longitude using a
   // spinner control.
   var Longitude = $("#longitude").spinner(
      min: -180,
      max: 180,
      step: .1,
      change: function(event, ui)
        if (Longitude.spinner("value") < -180)
         Longitude.spinner("value", -180);
        if (Longitude.spinner("value") > 180)
         Longitude.spinner("value", 180);
   // This function actually displays the map on
   // screen.
   function GetMap()
     // Create a list of arguments to send to Google.
     var MapOptions =
      center: new google.maps.LatLng(
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     // Provide the location to place the map and the
     // map options to Google.
     var map = new google.maps.Map(
   // The example provides two methods of getting a
   // map: during page loading or by clicking Get Map.

To make it easier to browse an area, the example provides spinner controls for the latitude and longitude inputs. Moving an entire degree at a time wouldn’t make the application very useful, so the two spinners change the inputs by a tenth of a degree at a time. (Even this setting may be too large, so you might want to change it.)

Notice the use of the step option to perform this task. Latitudes range from 90 degrees north to –90 degrees south, so the example reflects this requirement. Likewise, longitudes range from 180 degrees west to –180 degrees east of Greenwich, England.

The GetMap() function performs the actual task of obtaining the map. To do this, your application must create a list of map options. The example shows a simple, but typical, list. The most important of these options is where to center the map.

In this case, the map automatically centers itself on Milwaukee, Wisconsin, but you can change the settings to any location you want. The example uses a zoom factor of 8, and you’ll see a road map. The Google Maps API actually provides a number of map types that you can try.

There are two times when GetMap() is called. When the application loads, you see Milwaukee, Wisconsin (unless you change the default settings). After you change the inputs, you can also click Get Map to display a new location.