How to rotate cropped images in single canvas

Question

I have drawn a single image inside canvas, that is cropped into 4 different pieces. I would like to rotate, for example, the second cropped region around its top most side at the center. Right now, if I change the translate values, the rotation is the same as before, only difference is that the posX, posY are changed.

Drawing function:

//Function that is called on each 'tick' event, 60fps
draw: function(){
    if(this.rotation != 0){
        _self.elements.context.save();      
        // what values to put here so that '2' would rotate correctly ???
        _self.elements.context.translate(0,0);      
        _self.elements.context.rotate(this.rotation);
        _self.elements.context.drawImage(
            _self.elements.image,this.sx, this.sy, this.sw, this.sh, this.dx, this.dy, this.sw, this.dh
        );
        _self.elements.context.restore();
    }else{
        _self.elements.context.drawImage(
            _self.elements.image, this.sx, this.sy, this.sw, this.sh, this.dx, this.dy, this.sw, this.dh
        );
    }
}

Rotation using TweenMax

//Rotate the '2' cropped image part   
TweenMax.to(_self.CanvasImages.collection[1], 2, {rotation:0.5});

I have also provided full code in jsFiddle which should bring a greater understanding of what exactly I am talking about.

Answer 1

If I have been able to understand this correctly, here is what I think you can do:

1. In your line with _self.elements.context.drawImage(... call inside draw function within the _self.CanvasImage object, instead of passing this.dx and this.dy, try passing 0 and 0.
2. And then in your _self.elements.context.translate(... call inside the same function, pass this.dx and this.dy.
3. This should rotate the object around its top-left point.
4. However, if you want to move it around its top-center point then what you can do is in the same _self.elements.context.drawImage(... call mentioned above, instead of passing 0 as a replacement to the previous this.dx value, pass -(this.sw * 0.5).

JS Code Update #1 (for points 1-3 above):

...
_self.elements.context.translate(this.dx, this.dy);
_self.elements.context.rotate(this.rotation);
_self.elements.context.drawImage(_self.elements.image, this.sx, this.sy, this.sw, this.sh, 0, 0, this.sw, this.dh);
...

jsFiddle #1.

JS Code Update #2 (for point 4 above):

...
_self.elements.context.drawImage(_self.elements.image, this.sx, this.sy, this.sw, this.sh, -(this.sw * 0.5), 0, this.sw, this.dh);
...

jsFiddle #2.

Hope this helps.