rotating an arrow in canvas

Question

I want to rotate the arrow to any given angle. What i need to add/modify so that it can be rotated to any angle. Currently its on 180 degree.

function drawArrowAtAngle(cx,cy,angle,context){
  context.save();
  context.beginPath();
  context.lineWidth = 1;
  context.strokeStyle = '#aaa';
  context.moveTo(cx+25,cx-2);
  context.lineTo(cx-55,cx-2);
  context.lineTo(cx-58,cx);
  context.lineTo(cx-55,cx+2);
  context.lineTo(cx+25,cx+2);
  context.lineTo(cx+25,cx-2);  
  context.stroke();
  context.closePath();
  context.restore();

 }

Answer 1

Assuming that you want the center of rotation to be (cx,cx), insert the following three lines after the context.save(); statement.

  context.translate(cx,cx) ;
  context.rotate(angle) ;
  context.translate(-cx,-cx) ;

This will cause the arrow to be rotated clockwise by angle (in radians).

You use (cx,cx) in your code to anchor the arrow. If you really mean (cx,cy), then adjust the above snippet accordingly.