Rotate image in a canvas

Simple image rotation using Raphael. Basic rotate.

by Joey Albert Abano

HTML

<div>
<input id="txt-degree" type="text" value="0" />
<input id="btn-rotate" type="button" value="rotate"/>
</div>
<div id="holder">
<img id="bee" src="https://www.gravatar.com/avatar/3b342dc9477c684b6278766e7bc1ffcf?s=80" width="220" height="220">
</div>

JavaScript

var src = document.getElementById('bee').src; // $('bee').src;
document.getElementById('holder').innerHTML = ''; // $('holder').empty();
var paper = Raphael("holder", 640, 480);  
var img = paper.image(src, 10, 10, 220, 220);
document.getElementById('btn-rotate').onclick = function(e) {
  angle =  document.getElementById('txt-degree').value
  img.animate({transform: "r" + angle}, 1000, "<>");
}