Introduction to GeoLocation

Geolocation allows users to share their physical location with your application if they choose to. Especially useful in social networking, geo tagging, and mapping, but applicable to any type of application, geolocation enables developers to enhance the user experience, making content, social graphs and advertisements more relevant to the location of the user.

The browser will request the permission of the user before accessing geolocation information. Geolocation is an opt in feature: when your web application requests Geolocation information, mobile browsers create an alert, and the desktop browser asks via banner that pops up at the top of the browser window asking permission to access location information. The user can grant permission or deny it, and optionally remember the choice on that site. If permission is granted, the Geolocation information will be accessible to your scripts and any third party scripts included in the page, letting your application determine the location of the user, and maintain location as the user moves around.

Location information is approximate, not exact, being garnered from IP addresses, cell towers, Wi-Fi networks, GPS, or even getting the information through manual data entry by the user.  The geolocation API does not care how the client determines location as long as the data is received in a staddard way. Because determining location can take time, the geolocation API is asynchronous.

To determing browser support for geolocation use:

if(navigator.geolocation) {
   //geolocation is supported

The geolocation object provides for the getCurrentPosition() method that asynchronously returns the user’s current location.

if(navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(handle_success, handle_errors);

If successful, the callback function will return the current position with the coords property contains the more common latitude and longitude properties as well as the altitude, accuracy, altitudeAccuracy, heading and speed properties. The following script will return the alert the current latitude and longitude, and is available in the chapter files:

if(navigator.geolocation) {
function handle_success(position){ 
 alert('Latitude: ' + position.coords.latitude + '\n Longitude: ' + position.coords.latitude); 
 function handle_errors(err) { 
   case err.PERMISSION_DENIED: alert("User refused to share geolocation data"); 
   case err.POSITION_UNAVAILABLE: alert("Current position is unavailable"); 
   case err.TIMEOUT: alert("Timed out"); 
   default: alert("Unknown error"); 



The draft specification can be found at Geolocation is support in Firefox, Webkit and Opera, but not IE. It is anticipated that it will be supported in IE9.

HTML5: Introduction to <canvas>

Canvas: Tutorial of basic canvas functionality, canvas properties and methods

The HTML5 Canvas specification is a JavaScript API for coding drawings. The canvas API allows the definition of a canvas context object as the <canvas> element on your HTML page inside which we can draw.

We can draw in both 2D and 3D (WebGL) context. 2D is available in all the modern Web browsers, IE9, and via excanvas.js in current versions of IE, and will be more thoroughly introduced below. 3D is still nascent, with only experimental implementations.

2D context provides a simple yet powerful API for performing quick drawing operation, on a 2D bitmap surface. There is no file format, and you can only draw using script. You do not have any DOM nodes for the shapes you draw — you’re drawing pixels, not vectors. OK, not true. You are drawing vectors, but once drawn, only the pixels are remembered.

Your first <canvas>

Being a very basic introduction to canvas, we are only going to cover basic shapes and lines. If you are unfamiliar with JavaScript, the syntax may at first seem a bit confusing. If you are familiar, it should make sense.

Step 1 is adding the <canvas> element to your document. In terms of HTML, the only step involved in adding a canvas to your document is adding the <canvas> element to your document:

<canvas id="flag" width="320" height="220">
You don't support Canvas. If you did, you would see a flag

That is it for the HTML part of it. . We could simply have written <canvas></canvas>. However, you should include an id for ease of JavaScript targeting, but you could also target via placement within the DOM. You can also define the width and height of the canvas, though you can define that in the CSS as well. We’ve also included alternative content for users that don’t support or otherwise can’t see your <canvas> content

With that, we’ve created your blank drawing board, or canvas. Everything else takes place in our JavaScript files. Step 2 is drawing on our canvas. From now on, everything is in javascript. We target the canvas node with getElementById(‘flag’) or getElementsByTagName(‘canvas’)[0], initialize a 2D context and start drawing using 2D context API commands. We can draw the Japanese flag:

var el= document.getElementById("flag");

if (el && el.getContext) {
var context = el.getContext('2d');
context.fillStyle = "#ffffff";
context.strokeStyle = "#CCCCCC";
context.lineWidth = 1;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.4)';
context.strokeRect(10, 10, 300, 200);
context.fillRect(10, 10, 300, 200);
context.fillStyle = "#d60818";
context.arc(160, 107, 60, 0, Math.PI*2, false);


The first line finds your <canvas> element by matching the element’s id attribute. Before creating the 2D context, we check to make sure that the canvas element has been found AND that the browser supports canvas by checking for the existence of the getContext method.

We have to then create a reference to a context using the getContext(contextId) method of the canvas element –‘2d’ and ‘3d’ are the contextId value choices. If context creation is successful, we are finally free to draw in our canvas.

Before drawing a shape, we must define the look and feel of the shape we want to draw by setting properties on the context object. We define the look of the border (stroke and linewidth) properties and the shadow of our first rectangle, which we draw with the strokeRect() method. We pass the same parameters as our SVG example: (10, 10, 300, 200). The four values are the x-offset, the y-offset, width and height respectively. Once the script executes a command, the script forgets about what it has done, and moves onto the next line of code. Unlike our SVG example, the rectangle we’ve drawn on our canvas is not part of the DOM.

When we draw our second rectangle using the fillRect method, which paints rectangles using the previously set fillStyle property, we need to pass the coordinates again as the DOM does not remember our first rectangle, though it can access pixel information.

Both rectangle method calls have the same parameters — 10, 10, 300, 200 — we’ve drawn our fill rectangle directly on top of our dropshadow rectangle. We could have created an object with those coordinates and passed it to both methods, but we can’t tell the canvas to access the first rectangle’s coordinates and copy to the second after the method call

As mentioned above, once you paint onto the canvas, the DOM has no recollection of what you’ve painted. Yes, the JavaScript remembers the values of the properties you’ve set, but the pixels that are places on the canvas are just pixels of color. As we start the process of drawing the disc or sun on our flag, the DOM has no recollection of which pixels were painted with which colors, but it does remember some properties we set, like our shadowColor. As we don’t want a shadow on the red circle, we can set the shadowColor to transparent.

Next we define our circle. We are not actually drawing the circle yet. context . arc(x-offset of center, y-offset of center, radius, startAngle, endAngle, anticlockwise) adds points to an arced path creating a virtual circumference of a circle described by the arguments, starting at the given start angle, in our case 0, which is on the right horizon, and ending at the given end angle, going in the given direction, which in our case is clockwise. Had our endAngle been less than 2Π, our circle would have been flattened: the start and end points connected by a straight line. Π would have created a half circle. We also re-define the fill color, from white to red. We then paint the circle we created using the fill() method that fills the described arc in the fillStyle color.

We haven’t even touched the surface of what <canvas> can do. is a fun page to learn simple shapes, colors, shadows, text, images, transformation, animation and mouse movement with <canvas>.

Canvas functions and properties


Set the fillStyle


Set the strokeStyle


Line widths


Line join styles

   context.lineJoin="bevel || round || miter"

Line end styles

   context.lineCap="butt || round || square"


Draw a rectangle

   context.strokeRect(left, top, width, height)

Fill a rectangle

   context.fillRect(left, top, width, height)

Erase a rectangle

   context.clearRect(left, top, width, height)


Begin a path


Complete a path


Move the pen to a location

   context.moveTo(horizontal, vertical)

Draw a straight line from current point to a new location

   context.lineTo(horizontal, vertical)

Stroke the current path


Fill the current path



Shadow color


Shadow horizontal offset


Shadow vertical offset


Shadow blur


Canvas versus SVG

HTML5 Canvas and SVG may seem similar, in that they are both web technologies that allow you to create rich graphics inside the browser, but they are fundamentally different. In SVG, you ‘draw’ with XML. For canvas, you draw with JavaScript. Canvas is the painting of pixels onto a canvas, once painted, each pixel is forgotten. SVG, on the other hand, creates DOM nodes, accessible until deleted or until navigation away from the page. They both have their advantages and disadvantages.

SVG is resolution independent, making SVG an excellent choice for user interfaces of all sizes as it allows scaling for all screen resolutions. SVG is an XML file format enabling easy accessibility. SVG can be animated using a declarative syntax, or via JavaScript. Each element becomes part of and is accessible via the SVG DOM API in JavaScript. However, anything that accesses the DOM repeatedly slows the page down.

Canvas is all drawn in pixels. Zooming can lead to pixilation. Canvas is inherently less accsessible: accessibility is limited mainly to including fallback content should canvas not render. Interactivity requires redrawing of each pixel. There are no DOM nodes for anything you draw. There’s no animation API, instead timers are generally used for updating the canvas at quick intervals. Canvas gives you a surface to draw onto with the API of the context you choose. Canvas, however, is very well suited for editing of images, generating raster graphics such as for games or fractals, and operations requiring pixel-level manipulation. Canvas can also be exported to gif or jpeg.

CSS3 Transform Property and the various transform functions

The transform property

Supported in Firefox 3.5+. Opera 10.5 and Webkit since 3.1, the transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. We manipulate an elements appearance using transform functions. The value of the transform property is a list of space-separated transform functions applied in the order provided. The transform functions include:


The translate(x, y) function is similar to relative positioning, translating, or relocating, an element by x from the left, and y from the top.

  -webkit-transform: translate(15px, -15px); 
  -moz-transform: translate(15px, -15px);
  -o-transform: translate(15px, -15px); 
  transform: translate(15px, -15px);



The translateX(x) function is similar to the translate() function above, but only the left/right value is specified

  -webkit-transform: translatex(15px);
  -moz-transform: translatex(15px);
  -o-transform: translatex(15px);
  transform: translatex(15px);



The translateY(y) function is similar to the translate() function above, but only the top/bottom value is specified

  -webkit-transform: translatey(-15px); 
  -moz-transform: translatey(-15px); 
  -o-transform: translatey(-15px); 
  transform: translatey(-15px);


The scale(w, h) property scales an element by w width and h height. If only one value is declared, the scaling will be proportional. Since you likely don’t want to distort an element, you’ll generally see only one parameter in this transform function

  -webkit-transform: scale(1.5, 2);
  -moz-transform: scale(1.5, 2);
  -o-transform: scale(1.5, 2);
  transform: scale(1.5, 2);


The scalex(w) function is similar to the scale() function above, but only the width value is specified. It is the same as declaring scale(w, 1)

  -webkit-transform: scalex(0.5); 
  -moz-transform: scalex(0.5); 
  -o-transform: scalex(0.5); 
  transform: scalex(0.5);


The scaley(y) function is similar to the scale() function above, but only the height value is specified. It is the same as declaring scale(1, h)

  -webkit-transform: scaley(2);
  -moz-transform: scaley(2);
  -o-transform: scaley(2);
  transform: scaley(2);


The rotate(angle) function with rotate an element about the point of origin (described below) but the angle value specified.

  -webkit-transform: rotate(15deg); 
  -moz-transform: rotate(15deg); 
  -o-transform: rotate(15deg); 
  transform: rotate(15deg)


The skew(x,y) function specifies a skew along the X and Y axes. The x specifies the skew on the x-axis, the y specifies the skew on the y-axis. If there is only one parameter, then it’s the same as skew(x, 0), or skewX(x) . The values are angles: degrees, turns or grads.

  -webkit-transform: skew(15deg,  4deg);
  -moz-transform: skew(15deg,  4deg);
  -o-transform: skew(15deg,  4deg);
  transform: skew(15deg,  4deg);


The skewx(x) function is similar to the skew() value above, but only the x-axis value is specified. It is the same as declaring skew(x,0)

  -webkit-transform: skewx(15deg);
  -moz-transform: skewx(15deg);
  -o-transform: skewx(15deg);
  transform: skewx(15deg);


The skewy(y) function is similar to the skew() value above, but only the y-axis value is specified. It is the same as declaring skew(0,y).

  -webkit-transform: skewy(-6deg); 
  -moz-transform: skewy(-6deg); 
  -o-transform: skewy(-6deg); 
  transform: skewy(-6deg);

Multiple transforms

The above show single transforms, but you can include more than one transform on an element. To include more than one transform, simply separate them the tranform functions with spaces.

  .enlargen:hover {
  	-webkit-transform: translate(-50%, -50%) scale(2) rotate(0); 
  	-moz-transform: translate(-50%, -50%) scale(2) rotate(0);
  	-o-transform: translate(-50%, -50%) scale(2) rotate(0);
  	transform: translate(-50%, -50%) scale(2) rotate(0);

The above makes the element twice and tall and twice as wide. By translating the element 50% up and to the left, the bottom right corner should remain in the exact same location. The rotate(0) removes any possible rotation on the element.

This ‘enlargen’ class may be something you would want to add to an image gallery, hilighting an image that is hovered by making it four times larget (twice as wide and twice as tall) and remove any tilt that might have been interesting as a thumbnail but tacky in full size.