title: How can I rotate a Canvas containing an Image by 90, 180, 270 Degrees?
body: <p>I have an HTML5 canvas which contains an image. Now I want to rotate this canvas by x degrees.</p>
  
  <p>What I did was:</p>
  
  <pre><code>function getRadianAngle(degreeValue) {
      return degreeValue * Math.PI / 180;
  } 
  
  var rotateCanvas = function(canvas, image, degrees) {
    var context = canvas.getContext('2d');
    context.rotate(getRadianAngle(degrees));
    context.drawImage(image, 0, 0);
    return canvas;            
  }
  
  var image = new Image();
  image.onload = function() {
     var canvas = document.createElement("canvas");
     var context = canvas.getContext('2d');
     var cw = canvas.width = image.width;
     var ch = canvas.height = image.height;
     context.drawImage(image, 0, 0, image.width, image.height);
  
     rotateCanvas(canvas, image, 180);
  }
  image.src = // some image url;
  </code></pre>
  
  <p>This code does not work correctly. </p>
  
  <p><strong>How can I define a rotate function to rotate a canvas?</strong></p>
  
  <p>Edit: I do not want to use css because I need the canvas for further processing. </p>