title: How to rotate image using HTML5 canvas library like: KineticJS or KonvaJS?
body: <p>I am able to rotate a rectangle (shape) using KineticJS library I would like now to rotate an image, How I can do that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var stage = new Kinetic.Stage({
   container: 'container',
   width: 530,
   height: 530
  });
  var layer = new Kinetic.Layer();
  
  var bg = new Kinetic.Image({
      x: 0,
      y: 0,
      width: 530,
      height: 530,
      fill: '#D7D7D7',
  });
  /****************** image **********************/
  //sticker.setRotationDeg(90);
  var imageObj = new Image();
  function sticker(v) {
   if(!imageObj.src){
    var sticker = new Kinetic.Image({
     x: 280,
     y: 300,
     image: imageObj,
     draggable: true
    });
    layer.add(sticker);
   }
   imageObj.src = 'http://cdn.sstatic.net/photo/img/apple-touch-icon.png';
   layer.draw();
  }
  /****************** image **********************/
  
  
  layer.add(bg);
  stage.add(layer);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;input type="button" value="ShowSticker" onclick="sticker();"&gt; click show sticker
  &lt;input type="button" value="rotate"&gt; up + 5 </code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to Click The rotation</p>
  
  <p>step 1 click button show sticker</p>
  
  <p>step 2 click button rotate</p>
  
  <p>Each time you press  + 5</p>
  
  <p>or see web : <a href="http://jsfiddle.net/m1erickson/Z6Yg8/" rel="nofollow">http://jsfiddle.net/m1erickson/Z6Yg8/</a></p>