rotate image on canvas?

by Gustavo Carvalho

HTML

<div>
    <canvas id="one" width="100" height="200"></canvas>
</div>
<div>
    <button id="rotate">rotate canvas</button>
</div>

CSS

#one {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("one");
    var context = canvas.getContext("2d");
    var cw = canvas.width;
    var ch = canvas.height;

    // Sample graphic
    context.beginPath();
    context.rect(10, 10, 20, 50);
    context.fillStyle = 'yellow';
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = 'black';
    context.stroke();

    // create button
    var button = document.getElementById("rotate");
    button.onclick = function () {
        rotate((Math.PI / 2));
    }

    //var myImageData, rotating = false;

    var myImageData = context.getImageData(0, 0, cw, ch);

    var rotate = function (angle) {
        if (!rotating) {
            rotating = true;
            myImageData = null;
            // store current data to a image
            myImageData = new Image();
            myImageData.src = canvas.toDataURL("image/png", 1);

            myImageData.onload = function () {
                // reset the canvas (clear) with new dimensions
                canvas.width = ch;
                canvas.height = cw;
                cw = canvas.width;
                ch = canvas.height;

                context.save();

                context.translate(cw, ch / cw);
                context.rotate(angle);

                context.drawImage(myImageData, 0, 0);

                context.restore();
                rotating = false;
            }
        }
    }

    /* alternatives to toDataURL (use a buffered canvas)

    // create buffer
    var buffer = document.createElement("canvas");
    buffer.width = cw;
    buffer.height = ch;
    var bufferCtx = buffer.getContext("2d");

    var rotate = function (angle) {
        if (!rotating) {
            rotating = true;
            myImageData = null;

            // draw on buffer
            bufferCtx.drawImage(canvas, 0, 0);

            // reset the canvas (clear) with new dimensions
            canvas.width = ch;
            canvas.height = cw;
            cw = canvas.width;
       ...