How can i move rotated canvas image whitout disorientation?

Reset the transformations after drawing. The mouse events are transformed as well when applied to the canvas context so using transforms only when drawing can solve this. However, this also require the code to use absolute values, for example:

function draw(){
    var im_width = parseInt( imageObj.width + resizeAmount, 10 );
    var im_height = parseInt( imageObj.height + resizeAmount, 10 );
    var rotationAmount = rotationVal; // disabled: - prevRotation;

    context.clearRect( 0, 0, canvas.width, canvas.height );

    // move to origin first
    context.translate( moveXAmount, moveYAmount );

    // rotate
    context.rotate( rotationAmount * Math.PI / 180 );

    // change to translate back based on image size
    // (remember to compensate for scale, not shown here)
    context.translate( -imageObj.width/2, -imageObj.height/2 );
    context.drawImage( imageObj, 0, 0, im_width, im_height );

    // reset transforms (identity matrix)
    context.setTransform(1,0,0,1,0,0);
} 

Modified fiddle

Optionally you would need to use inverse matrix. This is something that will become available later when we can take out a SVGMatrix based on the current transformation matrix, but this is not widely available at this time. Otherwise the inverse matrix would be applied to the mouse x/y position to sort of, as the name implies, inverse the effect of the main transformation.

Optionally use a custom transformation matrix solution to keep track of transform (I'll invite you to check out my own approach to this here, it's free).

PS: also fixed the image loading problem (see fiddle).