Rotate image in the correct coordinates (x,y) in a canvas

Question

The question is related with that other question: https://stackoverflow.com/questions/26948677/translate-coordinates-to-its-equivalent-in-scale1 that no one gave response but it does not matter anymore because it's solved, at least that part. I get the correct x and y values.

I put you in situation, the app I'm developing allows the user to create a image with 6 differents backgrounds with funny characters without face so that the user can put a photo of his/her face. To do this, they can drag, pinch to zoom and rotate the image. Drag and pinch to zoom are under control but when the image is rotated I can not match the image in the exact coordinates. The images always go up a little.

An example, I get as values that:

x: 30, y: 80, scale: 0.5, deg: 40.

So, when I draw into a canvas the rotated image the y seems to go up a little depending on the degrees. Less degrees, less go up.

I'm using this function to draw the image rotated:

var TO_RADIANS = Math.PI / 180;
var drawRotatedImage = function (context, image, x, y, angle) {
    context.save();

    context.translate(x, y);

    context.rotate(angle * TO_RADIANS);

    context.drawImage(image, -(image.width / 2), -(image.height / 2));

    context.restore();

}

PD: To point it out, if I do not rotate the image, it matches perfectly in the correct position.

How I can get the correct x and y values for the rotated image?