Media website professional

Step 1: Put the JavaScript code below in your HEAD.

<script type="text/javascript">
// Created by: Benoit Asselin | http://www.ab-d.fr
// This script downloaded from www.JavaScriptBank.com

function rotate(p_deg) {
 if(document.getElementById('canvas')) {
  /*
  Ok!: Firefox 2, Safari 3, Opera 9.5b2
  No: Opera 9.27
  */
  var image = document.getElementById('image');
  var canvas = document.getElementById('canvas');
  var canvasContext = canvas.getContext('2d');
  
  switch(p_deg) {
   default :
   case 0 :
    canvas.setAttribute('width', image.width);
    canvas.setAttribute('height', image.height);
    canvasContext.rotate(p_deg * Math.PI / 180);
    canvasContext.drawImage(image, 0, 0);
    break;
   case 90 :
    canvas.setAttribute('width', image.height);
    canvas.setAttribute('height', image.width);
    canvasContext.rotate(p_deg * Math.PI / 180);
    canvasContext.drawImage(image, 0, -image.height);
    break;
   case 180 :
    canvas.setAttribute('width', image.width);
    canvas.setAttribute('height', image.height);
    canvasContext.rotate(p_deg * Math.PI / 180);
    canvasContext.drawImage(image, -image.width, -image.height);
    break;
   case 270 :
   case -90 :
    canvas.setAttribute('width', image.height);
    canvas.setAttribute('height', image.width);
    canvasContext.rotate(p_deg * Math.PI / 180);
    canvasContext.drawImage(image, -image.width, 0);
    break;
  };
  
 } else {
  /*
  Ok!: MSIE 6 et 7
  */
  var image = document.getElementById('image');
  switch(p_deg) {
   default :
   case 0 :
    image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
    break;
   case 90 :
    image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
    break;
   case 180 :
    image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
    break;
   case 270 :
   case -90 :
    image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
    break;
  };
  
 };
};

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
 var image = document.getElementById('image');
 var canvas = document.getElementById('canvas');
 if(canvas.getContext) {
  image.style.visibility = 'hidden';
  image.style.position = 'absolute';
 } else {
  canvas.parentNode.removeChild(canvas);
 };
 
 rotate(0);
});
</script>

Step 2: Put the HTML code below into the BODY

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<p>
 rotate:
 <input type="button" value="0Â°" onclick="rotate(0);">

 <input type="button" value="90Â°" onclick="rotate(90);">
 <input type="button" value="180Â°" onclick="rotate(180);">
 <input type="button" value="-90Â°" onclick="rotate(-90);">
</p>
<p>
 <img id="image" src="http://www.javascriptbank.com/templates/jsb.V8/images/logo_jsbank.jpg" alt="">
 <canvas id="canvas"></canvas>
</p>

Rotate with CANVAS JavaScript in HTML5