gistfile1.txt

 didUpdateLayer: function() {
    var elem   = this.$('canvas'),
        ctx    = elem[0].getContext("2d"),
        width  = this.$().width(),
        height = this.$().height(),
        loc    = this.get('anchorLocation'), 
        ploc, color, x, y, tmp;

    // adjust size as needed...
    if (Number(elem.attr('width')) !== width) elem.attr('width', width);
    if (Number(elem.attr('height')) !== height) elem.attr('height', height);
    width--; height--; // adjust for being off 0.5

    // do  the drawr-ing!
    if (!this.get('isEnabled')) loc = null;
    color = loc ? 'black' : 'rgb(128,128,128)';
    
    ctx.save();
    ctx.lineWidth = 1;
    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.strokeStyle = color;
    ctx.fillRect(0.5, 0.5, width, height);
    ctx.strokeRect(0.5, 0.5, width, height);

    ctx.strokeStyle = color;
    ctx.strokeRect(20.5, 20.5, width-40, height-40);

    ctx.beginPath();
    ctx.moveTo(Math.floor(width/2)+0.5, 20.5);
    ctx.lineTo(Math.floor(width/2)+0.5, Math.floor(height-20)+0.5);
    ctx.moveTo(20.5, Math.floor(height/2)+0.5);
    ctx.lineTo(Math.floor(width-20)+0.5, Math.floor(height/2)+0.5);
    ctx.stroke();
    ctx.restore();

    loc = this.get('anchorLocation');
    
    ploc = this.get('proposedAnchorLocation');
    if (ploc && ploc !== loc) {
      color = this.get('isActive') ? 'rgb(80,80,80)' : 'rgb(200,200,200)';
      this._drawAnchorAt(ploc, ctx, color, width, height);
    }
    
    this._drawAnchorAt(loc, ctx, 'red', width, height);
  },