title: CamanJS revert and rotate fix
body: <p>If you use the rotation plugin in CamanJS there is an issue when you are trying to revert changes. Caman is only implemented in a way that is working good when you crop or resize your image, but not when you rotate it. When you revert and the image is rotated the image reloads distorted, because it doesn't take under consideration that the canvas has rotated and changed size. Also the imageData.data of the canvas are different now. So I think i fixxed it by looking how he implemented the resize. Basicaly what I did (and he does too) is:</p>
  
  <ol>
  <li>Create a canvas in the initial state</li>
  <li>Update his pixelData from the initialState</li>
  <li>create a new canvas </li>
  <li>Rotate him with the initial image</li>
  <li>get the ImageData and rerender them</li>
  </ol>
  
  <p>So what I added. I needed to know how many angles was the image rotated so I can get the correct imageData when rotate the new canvas (step 4). </p>
  
  <pre><code>this.angle=0; //added it in the constructor
  </code></pre>
  
  <p>I also added a new boolean in the constructor to tell me if canvas was rotated</p>
  
  <pre><code>this.rotated = false;
  </code></pre>
  
  <p>In the rotated plugin:</p>
  
  <pre><code>Caman.Plugin.register("rotate", function(degrees) {
      //....
      //....
      //....
      this.angle += degrees;
      this.rotated = true;
      return this.replaceCanvas(canvas);
  }
  </code></pre>
  
  <p>and on the originalVisiblePixels prototype:</p>
  
  <pre><code>else if (this.rotated){
      canvas = document.createElement('canvas');//Canvas for initial state
      canvas.width = this.originalWidth; //give it the original width
      canvas.height = this.originalHeight; //and original height
      ctx = canvas.getContext('2d');
      imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      pixelData = imageData.data;//get the pixelData (length equal to those of initial canvas      
      _ref = this.originalPixelData; //use it as a reference array
      for (i = _i = 0, _len = _ref.length; _i &lt; _len; i = ++_i) {
          pixel = _ref[i];
          pixelData[i] = pixel; //give pixelData the initial pixels
      }
      ctx.putImageData(imageData, 0, 0); //put it back on our canvas
      rotatedCanvas = document.createElement('canvas'); //canvas to rotate from initial
      rotatedCtx = rotatedCanvas.getContext('2d');
      rotatedCanvas.width = this.canvas.width;//Our canvas was already rotated so it has been replaced. Caman's canvas attribute is allready rotated, So use that width
      rotatedCanvas.height = this.canvas.height; //the same
      x = rotatedCanvas.width / 2; //for translating
      y = rotatedCanvas.width / 2; //same
      rotatedCtx.save();
      rotatedCtx.translate(x, y);
      rotatedCtx.rotate(this.angle * Math.PI / 180); //rotation based on the total angle
      rotatedCtx.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); //put the image back on canvas
      rotatedCtx.restore(); //restore it
      pixelData = rotatedCtx.getImageData(0, 0, rotatedCanvas.width, rotatedCanvas.height).data; //get the pixelData back       
      width = rotatedCanvas.width; //used for returning the pixels in revert function               
  }
  </code></pre>
  
  <p>You also need to add some resets in the reset prototype function. Basicaly reset angle and rotated</p>
  
  <pre><code>Caman.prototype.reset = function() {
      //....
      //....
      this.angle = 0;
      this.rotated = false;
  }
  </code></pre>
  
  <p>and that's it.</p>
  
  <p>I used it and works so far. What do you think?Hope it helps</p>