How can i change the rotation icon in fabricjs

Question

Please guide me to modify Fabricjs to add custom icon for Rotation.

I get some of the answers but it is not working fine.

Please let me know the code to chan

Answer 1

@hlozancic's answer overrides a big important part of the prototype. Monkey patching libraries maintained by a community doesn't sit well with me, since the code in those methods could change (and, in fact drawControls has changed since July 2nd), without my knowing. Here is an alternative that I prefer:

var _original = fabric.Object.prototype._drawControl;
fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) {
  var size = this.cornerSize;

  if (this.canvas.hasControlCallback && this.canvas.hasControlCallback[control]) {
    this.canvas.controlCallback[control](ctx, left, top, size);
  } else {
    _original.call(this, control, ctx, methodName, left, top);
  }
};

/* then, when instantiating your fabric canvas  */

var canvas = new fabric.Canvas();

/* callbacks for drawing the controls */
canvas.hasControlCallback = {
    mtr: true
};

canvas.controlCallback = {
    mtr: function mtrControlCallback (ctx, left, top, size) {
        var image = new Image(), x, y;

        image.src = 'http://www.navifun.net/files/pins/tiny/Arrow-Rotate-Clockwise.png';
        x = left - image.width/2 + size/2;
        y = top - image.height/2 + size/2;

        ctx.drawImage(image, x, y);
    }
};

Apologies for not providing a fiddle, and please be aware of the date of this writing.