Pointing Arrow

Arrow.coffee

class Arrow
  constructor: (x, y, w, h, rot)->
    @x = x
    @y = y
    @w = w
    @h = h
    @rot = rot

  pointTo: (x, y) ->
    m_y = @y - y
    m_x = @x - x
    
    @rot = Math.atan2(m_y, m_x)
    console.log(@rot*180/Math.PI)
    @draw()
    
  _rotateCanvas: ->     
    ctx.translate((@x + @w / 2), (@y + @h / 2))
    ctx.rotate(@rot)
    ctx.translate(-(@x + @w / 2), -(@y + @h / 2))
    
  remove: ->
    ctx.save()          
    
    @_rotateCanvas()           
    
    ctx.clearRect(@x-1, @y-1, @w+1, @h+1)
    
    ctx.restore()
    
  draw: ->
    ctx.save()
 
    @_rotateCanvas()
 
    ctx.translate(@x, @y)
 
    w = @w
    h = @h
    
    a = (1/2) * h
    b = (1/3) * w
    c = (1/4) * h
    d = (3/4) * h
    
    ctx.beginPath()
    ctx.moveTo(0, a)
    ctx.lineTo(b, 0)
    ctx.lineTo(b, c)
    ctx.lineTo(w, c)
    ctx.lineTo(w, d)
    ctx.lineTo(b, d)
    ctx.lineTo(b, h)
    ctx.closePath()
    ctx.stroke()
 
    ctx.restore()          
    

index.html

<canvas id="canvas" height="500" width="500"></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="main.js"></script>

main.coffee

ctx = document.getElementById('canvas').getContext('2d')
arrows = []
    
i = 0

while i < 25
  j = 0

  while j < 25
    arrows.push new Arrow(i * 20, j * 20, 20, 10, 0)
    j++
    
  i++    
    
$('#canvas').mousemove( (e)->
    ctx.clearRect(0,0,500,500)
    $.each(arrows, (index, arrow)-> 
        arrow.pointTo(e.clientX, e.clientY)
    )
)​

main.js

(function() {
  var Arrow, arrows, ctx, i, j;
  Arrow = (function() {
    function Arrow(x, y, w, h, rot) {
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
      this.rot = rot;
    }
    Arrow.prototype.pointTo = function(x, y) {
      var m_x, m_y;
      m_y = this.y - y;
      m_x = this.x - x;
      this.rot = Math.atan2(m_y, m_x);
      console.log(this.rot * 180 / Math.PI);
      return this.draw();
    };
    Arrow.prototype._rotateCanvas = function() {
      ctx.translate(this.x + this.w / 2, this.y + this.h / 2);
      ctx.rotate(this.rot);
      return ctx.translate(-(this.x + this.w / 2), -(this.y + this.h / 2));
    };
    Arrow.prototype.remove = function() {
      ctx.save();
      this._rotateCanvas();
      ctx.clearRect(this.x - 1, this.y - 1, this.w + 1, this.h + 1);
      return ctx.restore();
    };
    Arrow.prototype.draw = function() {
      var a, b, c, d, h, w;
      ctx.save();
      this._rotateCanvas();
      ctx.translate(this.x, this.y);
      w = this.w;
      h = this.h;
      a = (1 / 2) * h;
      b = (1 / 3) * w;
      c = (1 / 4) * h;
      d = (3 / 4) * h;
      ctx.beginPath();
      ctx.moveTo(0, a);
      ctx.lineTo(b, 0);
      ctx.lineTo(b, c);
      ctx.lineTo(w, c);
      ctx.lineTo(w, d);
      ctx.lineTo(b, d);
      ctx.lineTo(b, h);
      ctx.closePath();
      ctx.stroke();
      return ctx.restore();
    };
    return Arrow;
  })();
  ctx = document.getElementById('canvas').getContext('2d');
  arrows = [];
  i = 0;
  while (i < 25) {
    j = 0;
    while (j < 25) {
      arrows.push(new Arrow(i * 20, j * 20, 20, 10, 0));
      j++;
    }
    i++;
  }
  $('#canvas').mousemove(function(e) {
    ctx.clearRect(0, 0, 500, 500);
    return $.each(arrows, function(index, arrow) {
      return arrow.pointTo(e.clientX, e.clientY);
    });
  });
}).call(this);