Rotate image on canvas. https://jsfiddle.net/ek4fo0p7/4/
var clockwise = true;
var sourceimage = document.querySelector('img');
var button = document.querySelector('button');
var canvas = document.querySelector('canvas');
canvas.height = canvas.width = 0;
var context = canvas.getContext('2d');
button.addEventListener('click', function(ev){
var imgwidth = sourceimage.width;
var imgheight = sourceimage.height;
canvas.width = imgheight;
canvas.height = imgwidth;
context.translate(imgheight, 0);
if (clockwise) {
context.rotate(Math.PI/2);
context.drawImage(sourceimage, 0, 0);
} else {
context.rotate(-Math.PI/2);
context.drawImage(sourceimage, -imgwidth, -imgheight);
}
}, false);
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAcpSURBVGhDxZkJUBRHFIb/QQ5BUKKioKJR8cAz4oEmEi+CoCIeqKixPCJEJJ4RIWI8Y8VUFDUiCQoYDg0iImKItxAxgBVFE61oeeIRRECFBQHdwGa6mVlmYPaAXfSr6tqeY3vm/f36dfcb5rKbm6L9sqWwGj0GTYyMICS34AW+D0lG+JEMlMrKYWrelLtSPypey/FBrw7IPv4N5AXPcGW8OyqLivGV43x6feuVGFSWlOD9wADY+vlhX1wqfFZHNvh55aUV9PdDx+4I/HI6XHvZ4HFMNPKjoiF/mkevmfXtA5v5C2BQdv0G7iz0wXUvL+SdOolKuZzeQGhn1RI7Ns7DP2e2YP0KDzQzM6aNE4N0hTeeEDhwDlfTDf7dxn0yAMnxa5EWsQzDb2fimrs7Hm/cRI0nhncNDka/uDi0m+YJ5lFIiOLfqCi8zsmBgUlTWAwZjDZeM9F2kkcdj3j8tAARcb9jz4FUFObLwBg1QVMT8T1S1PaAMSv3c1fEHBhq0SAPIIaTd3Eb2Q9LfSdidCcLlJ44gbsR+1F286bILquxLjBq3pz7J2BwbaAzBqYcR5f162FkY43i9HTc8VuMax4eyD2cIPIIWxsrbFjhyRqygXpEp3Yt9eYRhNlZJVxNO4Q9fuLQWiRtnQ2HrN/oEPt71WpU3H+AFk5O6BYagr5cjwuNJx3KMF3mKoY5dK0eK10t6yjHj5XayhFIjIg+8gfCWI/IeVigsseEHvDxnK3cWWkuxARq9AC+x6e5OiJgyXj0bWWCokOHcC86VuTJ1vPmwsrVTdKTg39KQWzKn2DMe3srSIAjECU3+3uif1cbvAj7EXdCwyAvLFAK0d53kWSDmoIlL4C5pTl3Rj1zxjtKCkDaUcgraXBbFzATzv07IXfvXvBDmGA+aBB9T2v3ifRYCN9hW0KOK9+TClBZpaA38K4sHEsP94WjMOmYWFkfb8lZQxQj8orBmBjSGKGrAMIxvsh7PI3qpUmJSk8lEMPVeere2POISsyo46kiAXikgkpefIJSaWFQ0SZYEpxG9Ka/2pKeeoONUEyDgxuBN1xd0JYUgEeTEAReeXVCnM++y50Rk+5SPRU6nZaeFSyMjZXPFY5xAglu6sa4lCdKwcD2U2nreYg4Fa9pdcCwHli3bDLGdGyGojPnWDHilS5oZm+PVtOnwZYtRlZt6TkeVYFPkwApX0/Cs4QjyI89qIxF6oJb9q1HCI08i8gjF6AofgXWaupF6mCWr9uvXgABJeVV9NfFqTumuw+HXCajK6zCzCx6nmBuZwfbWV6w6N6THmsynkeVCNsU7FBgMbNsgdbsgsZ6rCs9rs2te08Ql5yFJ09lsDA14M5qhlGwcPVGQVsBCFIikGmxMWEKLmU1mgBTdqdyNTFSxhNUeUHiklFcTf8wF7t1V1RVVXKH+iNo2EKuJkaV8TyqRNiSGc7V9IsBY2gIQyMTvRd9I/UMfRRRtFCwAVMfJWCQ9O5OU+8TVN1D2pR6lq5F+3D5FtFGKH0hFoBMCDoWVXt7fRhF25Z4pi6FBkGufZ0RJjmENNR4VQHx20vS5xsCU5x9RW8CTAg+zdXE6FuAX1e6cDXd0dtCqD4LnvqgSgR9LZCYz/wjtBag5FX1nsDZqScWTB0uWos3lgAEKREi7avXLpbOzmg9xJEuhcOizyK3sBwWzbSfhjVvhghl1VlWshkK9HHFVFfHt2Y8QZUXbD4VDAN2C9xm1Ei08PREkV0f7I5Lx/4D51GeX6TdZkjb7bD3zBGY5DyQu1JDYxvPo0oEklLnd4ptXF3Q2dcHhbZ2OHjyKvbsTUHOg3z122FNCZE1vuPw0aDqnZ0Q2dVsPD2cAO/H4iTE24bfMguzVkSIjrO98LK3Q40QDws0J0SEKTG1hoeGIj81TeV6/21DAiJJt5P0Xe3cQY8lvmqFoALUToo69OxIj4WU3L6Fhz/sxsuTp1Alk9EHBI1czF19twhnBCLE/R27UMh6xX9FL5VC9AoKgLHDEGyLOYfvdiXSTJFpc9OatLj/5+MkxzgxPPfnaDxnXaz2WHPecZ67690iNSXWeW8uWPIxIjgmDVEHz4E5euayQq3hR5Mgf14oMvyZTWfs+iWdNmBvb8v9491wMeMW+A50H9GvTppMXQcSO+oshPjgxhtuaPkerCe4sbPlLJHhunwa4z+Okq04jy4fR/nYpUkIqWCp3AwRw2984YfrM2YiLzwclfI36MAaPTTlKOR+q7Am7Qkc3Ddge3AiXpW9oS+njfHqYFjp+aIL5D1Iybh0G5MX7MTHs7Yi/vhF0Wc9kqO0WxNEPwO2X76MfgbMO5YMA6IMMfzG7Dk0wBFIdrf/4XgY+wdhafxfGOyxCdt3HqWGm1uaoQm7uKhP4RG+EOl94b6cIEeNEsS7pNpSV8zZoEZKZvY9zPALw+ApG5VC8IVkrIkQvWOjYbV4Mf4HzMdz6O8P+GYAAAAASUVORK5CYII=" alt="comments"><br>
<button>Copy image to canvas</button><br>
<canvas id="canvas"/>