Control customization part 4 - draw selection background

src/mixins/object_interactivity.mixin.js

@@ -187,6 +187,28 @@
       return fabric.util.transformPoint(new fabric.Point(w, h), vpt, true);
     },
 
+    /**
+     * Draws a colored layer behind the object, inside its selection borders.
+     * Requires public options: padding, selectionBackgroundColor
+     * this function is called when the context is transformed
+     * @param {CanvasRenderingContext2D} ctx Context to draw on
+     * @return {fabric.Object} thisArg
+     * @chainable
+     */
+    drawSelectionBackground: function(ctx) {
+      if (!this.selectionBackgroundColor || !this.active || this.group) {
+        return this;
+      }
+      ctx.save();
+      var center = this.getCenterPoint(), wh = this._calculateCurrentDimensions();
+      ctx.translate(center.x, center.y);
+      ctx.rotate(degreesToRadians(this.angle));
+      ctx.fillStyle = this.selectionBackgroundColor;
+      ctx.fillRect(-wh.x/2, -wh.y/2, wh.x, wh.y);
+      ctx.restore();
+      return this;
+    },
+
     /**
      * Draws borders of an object's bounding box.
      * Requires public properties: width, height

src/shapes/object.class.js

@@ -527,6 +527,14 @@
      */
     backgroundColor:          '',
 
+    /**
+     * Selection Background color of an object. colored layer behind the object when it is active.
+     * does not mix good with globalCompositeOperation methods.
+     * @type String
+     * @default
+     */
+    selectionBackgroundColor:          '',
+
     /**
      * When defined, an object is rendered via stroke and this property specifies its color
      * @type String
@@ -1059,6 +1067,7 @@
 
       //setup fill rule for current object
       this._setupCompositeOperation(ctx);
+      this.drawSelectionBackground(ctx);
       if (!noTransform) {
         this.transform(ctx);
       }

src/shapes/text.class.js

@@ -816,6 +816,7 @@
       if (this._shouldClearCache()) {
         this._initDimensions(ctx);
       }
+      this.drawSelectionBackground(ctx);
       if (!noTransform) {
         this.transform(ctx);
       }