FabricJS Textbox/Shape Outline

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas width="400" height="300" id="c"></canvas>

JavaScript

//https://stackoverflow.com/questions/28207232/draw-border-around-nontransparent-part-of-image-on-canvas

fabric.Object.prototype._renderStroke = function(ctx) {
      if (!this.stroke || this.strokeWidth === 0) {
        return;
      }

      if (this.shadow && !this.shadow.affectStroke) {
        this._removeShadow(ctx);
      }
      
      if (this.extraStroke && this.extraStroke.length > 0){
      	var oldStroke = {stroke:this.stroke,strokeWidth:this.strokeWidth};
      	for (var i=this.extraStroke.length-1;i>=0;i--){
        	var currentStroke = this.extraStroke[i];
          this.stroke = currentStroke.stroke;
          this.strokeWidth = currentStroke.strokeWidth;
          this._setStrokeStyles(ctx, this);
                ctx.save();
                if (this.strokeUniform) {
                  ctx.scale(1 / this.scaleX, 1 / this.scaleY);
                }
                this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke);
                if (this.stroke.toLive && this.stroke.gradientUnits === 'percentage') {
                  // need to transform gradient in a pattern.
                  // this is a slow process. If you are hitting this codepath, and the object
                  // is not using caching, you should consider switching it on.
                  // we need a canvas as big as the current object caching canvas.
                  this._applyPatternForTransformedGradient(ctx, this.stroke);
                }
                else {
                  this._applyPatternGradientTransform(ctx, this.stroke);
                }
                ctx.stroke();
                ctx.restore();
        }
        this.stroke = oldStroke.stroke;
        this.strokeWidth = oldStroke.strokeWidth;
      }
      this._setStrokeStyles(ctx, this);

      ctx.save();
      if (this.strokeUniform) {
        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
      }
      this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke);
      if...