define(function(require){
  var fabric = require("fabric"),
      rectOutlinePts = require("utils/rectOutlinePoints"),
      circleOutlinePts = require("utils/circleOutlinePoints"),
      lineOutlinePts = require("utils/lineOutlinePoints"),
      squareBrushHelper = require("brushes/squareBrushHelper");

  var HollowSquare = fabric.util.createClass(fabric.BaseBrush, {
    width: 10,
    
    addPoint: function(pointer){
      var pointerPoint = new fabric.Point(pointer.x, pointer.y);

      var width = fabric.util.getRandomInt(Math.ceil(this.width/2), this.width);

      var strokeColor = new fabric.Color(this.color)
                          .setAlpha(fabric.util.getRandomInt(0, 100) / 100)
                          .toRgba();

      pointerPoint.width = pointerPoint.height = width;
      pointerPoint.strokeColor = strokeColor;

      this.points.push(pointerPoint);

      return pointerPoint;
    },

    initialize: function(canvas){
      this.canvas = canvas;
      this.points = [];
    },

    onMouseDown: function(){
      this.points.length = 0;
      this.canvas.clearContext(this.canvas.contextTop);
      this.setShadowStyles();
    },

    onMouseMove: function(pointer){
      var point = this.addPoint(pointer);
      var ctx = this.canvas.contextTop;

      ctx.lineWidth = 1;
      ctx.strokeStyle = point.strokeColor;
      ctx.beginPath();
      ctx.strokeRect(point.x - point.width/2, point.y - point.height/2, point.width, point.height);
      ctx.stroke();
    },

    onMouseUp: function(){
      var originalRenderOnAddition = this.canvas.renderOnAddition;
      this.canvas.renderOnAddition = false;

      for (var i = 0, len = this.points.length; i < len; i++) {
        var point = this.points[i];
        var square = new fabric.Rect({
          width: point.width,
          height: point.height,
          left: point.x,
          top: point.y,
          fill: null,
          stroke: point.strokeColor,
          strokeWidth: 1
        });
        this.canvas.add(square);
      }

      this.canvas.clearContext(this.canvas.contextTop);
      this.removeShadowStyles();
      this.canvas.renderOnAddition = originalRenderOnAddition;
      this.canvas.renderAll();
    }
  });

  return {
    create: function(canvas){
      return new HollowSquare(canvas);
    },

    createOutline: function(brush, shape, cfg){
      // TODO can we simplify this?
      // TODO parameter checking
      if (shape === "rect") {
        return rectOutlinePts(brush, cfg.x, cfg.y, cfg.width, cfg.height);
      } else if (shape === "circle") {
        return circleOutlinePts(brush, cfg.x, cfg.y, cfg.radius);
      } else if (shape === "line") {
        return lineOutlinePts(brush, cfg.x1, cfg.y1, cfg.x2, cfg.y2);
      }

      return;
    },

    createShapeBrush: function(canvas, cfg){
      var b = this.create(canvas);
      b.width = cfg.brushWidth || 10;

      var outline = this.createOutline(b, cfg.shape, cfg),
          outlineLength = outline.length;

      b.color = cfg.color || "#000000";

      for (var i = 0; i < outlineLength; i++){
        b.addPoint(outline[i]);
      }

      squareBrushHelper.drawSquares(canvas, {
        points: b.points
      });
    }
  };
});
@@ -63,200 +63,130 @@
     
-rectOutlinePts = require(%22utils/rectOutlinePoints%22),%0A      circleOutlinePts = require(%22utils/circleOutlinePoints%22),%0A      lineOutlinePts = require(%22utils/lineOutlinePoints%22),%0A      squareBrush
+squareBrushHelper = require(%22brushes/squareBrushHelper%22),%0A      compose = require(%22flight/lib/compose%22),%0A      withOutline
 Help
@@ -203,36 +203,38 @@
 re(%22brushes/
-squareBrushH
+with_outline_h
 elper%22);%0A%0A  
@@ -2151,22 +2151,39 @@
  %7D);%0A%0A  
-return
+var hollowSquareBrush =
  %7B%0A    c
@@ -2258,473 +2258,8 @@
 %7D,%0A%0A
-    createOutline: function(brush, shape, cfg)%7B%0A      // TODO can we simplify this?%0A      // TODO parameter checking%0A      if (shape === %22rect%22) %7B%0A        return rectOutlinePts(brush, cfg.x, cfg.y, cfg.width, cfg.height);%0A      %7D else if (shape === %22circle%22) %7B%0A        return circleOutlinePts(brush, cfg.x, cfg.y, cfg.radius);%0A      %7D else if (shape === %22line%22) %7B%0A        return lineOutlinePts(brush, cfg.x1, cfg.y1, cfg.x2, cfg.y2);%0A      %7D%0A%0A      return;%0A    %7D,%0A%0A
     
@@ -2695,12 +2695,99 @@
   %7D%0A
-
   %7D;
+%0A%0A  compose.mixin(hollowSquareBrush, %5BwithOutlineHelper%5D);%0A%0A  return hollowSquareBrush;
 %0A%7D);

migrate hollowSquareBrush to use with_outline_helper mixin