html - mousemove で描画されている矢印を回転させます

Question

mousemove で矢印を描画しようとしています。以下のコードは水平矢印を描画します。しかし、描画開始点から描画終了点まで回転させたいです。私はたくさんグーグルで検索しましたが、キャンバスに描くのが初めてだったので、解決策が見つかりませんでした。

drawArrowMove: function(e, _self)
    {
      var width    = e.w ;
      var height   = e.h ;
      var arrowW   = 0.35 * width;
      var arrowH   = 0.75 * height;
      var p1       = {x: 0,              y: (height-arrowH)/2};
      var p2       = {x: (width-arrowW), y: (height-arrowH)/2};
      var p3       = {x: (width-arrowW), y: 0};
      var p4       = {x: width,          y: height/2};
      var p5       = {x: (width-arrowW), y: height};
      var p6       = {x: (width-arrowW), y: height-((height-arrowH)/2)};
      var p7       = {x: 0,              y: height-((height-arrowH)/2)};

      _self.ctxTemp.beginPath();
      _self.ctxTemp.moveTo(p1.x, p1.y);
      _self.ctxTemp.lineTo(p2.x, p2.y); // end of main block
      _self.ctxTemp.lineTo(p3.x, p3.y); // topmost point
      _self.ctxTemp.lineTo(p4.x, p4.y); // endpoint
      _self.ctxTemp.lineTo(p5.x, p5.y); // bottommost point
      _self.ctxTemp.lineTo(p6.x, p6.y); // end at bottom point
      _self.ctxTemp.lineTo(p7.x, p7.y);
      _self.ctxTemp.fillStyle = 'black';
      _self.ctxTemp.fill();
      _self.ctxTemp.stroke();
    }