Today i present new feature of FireFox 3.6 – MozOrientation

With Canvas and MozOrientaion you will get nice web site!

Please look on my icons of Feed and Twitter! :)

My twitter source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function init() {
additional_load(null);
 window.addEventListener("MozOrientation", additional_load, true);
}

function additional_load(o) {
var drawingCanvasTwitter = document.getElementById('myDrawingTwetter');    
     // Check the element is in the DOM and the browser supports canvas
     if(drawingCanvasTwitter && drawingCanvasTwitter.getContext) {
          // Initaliase a 2-dimensional drawing context
          var context = drawingCanvasTwitter.getContext('2d');
     
               var myImage = new Image();
               myImage.onload = function() {
                    context.clearRect(0,0,150,150);
                    context.save();
                    if(o) {
                         if(o.x > 0)
                              context.translate(0, 134*o.x);
                         else
                              context.translate(-134*o.x, 0);
                    }    

                    if(o)
                         context.rotate((Math.PI/2)*-o.x);
                    context.drawImage(myImage, 0, 40);
                    context.restore();
               }
               myImage.src = "http://www.developers-life.com/wp-content/uploads/2009/12/tw.jpg";         
     }
}
1
<body onload="init()">

Example for handle orientation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
  <head>
    <style>
      p { font-size: 12px;
          color: rgb(0, 220, 98);
          background-color: black;
      }
      body { background-color: black; }
    </style>
   
    <script>
      var count = 0;
     
      function handleOrientation(orientData) {
        count++;
        var d = document.getElementById("display");
        d.innerHTML = "<p> count = " + count +  "<p> x = " + orientData.x + "<p> y = " + orientData.y + "<p> z  = " + orientData.z;
      }

      window.addEventListener("MozOrientation", handleOrientation, true);
    </script>
  </head>

  <body>
    <div id="display">
  </body>
</html>

example

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. <canvas> is based on the WHATWG canvas specification, which itself is based on Apple’s <canvas> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.
read more on developer.mozilla.org

Nice feature in firefox Saving a canvas image to a file

And many information about it in apple documentation

Additional