Q:

How to synchronize rotation on multiple images in JavaFX Canvas

I have multiple objects that I want to draw rotated together. When they are at 0 degrees (facing straight), they are good, but when they aren't, it looks like this:

I am using this code to rotate: 
private void rotate(GraphicsContext gc, double angle, double px, double py) {
    Rotate r = new Rotate(angle, px, py);
    gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy());
}

private void drawRotatedImage(GraphicsContext gc, Image image, double angle, double tlpx, double tlpy) {
    gc.save(); // saves the current state on stack, including the current transform
    rotate(gc, angle, tlpx + image.getWidth() / 2, tlpy + image.getHeight() / 2);
    gc.drawImage(image, tlpx, tlpy);
    gc.restore(); // back to original state (before rotation)
}

I have an array of images that I use and rotate them by calling drawRotatedImage using one unified angle. All the images are 32 x 32.
How can I fix this shift in the images?

A:

To rotate the images as a group, simply use the same transformation for all those images:
Instead of
gc.save();
gc.setTransform(new Affine(new Rotate(angle, image1CenterX, image1CenterY)));
gc.drawImage(image1, image1X, image1Y);
gc.restore();

gc.save();
gc.setTransform(new Affine(new Rotate(angle, image2CenterX, image2CenterY)));
gc.drawImage(image2, image2X, image2Y);
gc.restore();

...

(which is what you're doing, if you call drawRotatedImage for each image)
Use
gc.save();
gc.setTransform((new Affine(new Rotate(angle, rotationCenterX, rotationCenterY)));

gc.drawImage(image1, image1unrotatedX, image1unrotatedY);
gc.drawImage(image2, image2unrotatedX, image2unrotatedY);
...

gc.restore();

