What is most efficient HTML5 Canvas Rotation method? -

i want know efficient way rotate specific image on canvas.

1

        context.translate(centerx, centery);         context.rotate(rect.radians);         context.strokerect(-rect.width/2,  -rect.height/2, rect.width,  rect.height);         context.rotate(rect.radians *-1);         context.translate(-centerx, -centery); 

2

        context.save();         context.translate(centerx, centery);         context.rotate(rect.radians);         context.strokerect(-rect.width/2,  -rect.height/2, rect.width, rect.height);         context.restore(); 

3

        context.translate(centerx, centery);         context.rotate(rect.radians);         context.strokerect(-rect.width/2,  -rect.height/2, rect.width, rect.height);         context.settransform(1,0,0,1,0,0); 

i running function multiple objects every animation frame.

option#2 out efficient because resets context's state properties, not transform matrix.

@ken-abdiassoftware right #3--directly reset identity matrix.

of course, efficient rotation not doing rotation @ all.

if image(s) rotate pre-defined angles, cache image @ angles , use drawimage without need transforms @ all.

if have seldom/never rotated components, group them on separate canvas/image rotated components.