Rotate Image in Canvas

HTML

<div id="quick-bar">
    <button type="button" onclick="window.canvas.rotate(0);">Default</button>
    <button type="button" onclick="window.canvas.rotate(90);">Rotate 90</button>
    <button type="button" onclick="window.canvas.rotate(180);">Rotate 180</button>
    <button type="button" onclick="window.canvas.rotate(270);">Rotate 270</button>
</div>
<canvas id="edit-window" width="400" height="300" data-rotation="0"></canvas>
<img id="canvasSource" src="http://www.placekitten.com/400/300" style="visibility: hidden" />

JavaScript

var canvas = document.querySelector("#edit-window"),
    ctx = canvas.getContext("2d"),
    sourceImage = document.querySelector("#canvasSource");

ctx.drawImage(sourceImage, 0, 0);

if (!window.canvas) window.canvas = {};


//Create widget that can be attached to a canvas for image editing, simple rotate and draw on top of
window.canvas.rotate = function (deg) {
    var canvas = document.querySelector("#edit-window"),
        context = canvas.getContext("2d"),
        image = document.querySelector("#canvasSource");

    context.clearRect(0, 0, canvas.width, canvas.height);
    hheight=canvas.height;
    wwidth=canvas.width;
    
    context.save();
    context.rotate(-Math.PI / 2);
    context.drawImage(image, -hheight, 0, hheight, wwidth);
    context.restore();
};