fabric.js/src/circle_brush.class.js

/**
 * CircleBrush class
 * @class fabric.CircleBrush
 */
fabric.CircleBrush = fabric.util.createClass( /** @scope fabric.CircleBrush.prototype */ {

  /**
   * Color of the brush
   * @property
   * @type String
   */
  color: 'rgb(0, 0, 0)',

  /**
   * Width of a brush
   * @property
   * @type Number
   */
  width: 10,

  /**
   * Shadow blur of a pencil
   * @property
   * @type Number
   */
  shadowBlur:   0,

  /**
   * Shadow color of a pencil
   * @property
   * @type String
   */
  shadowColor:  '',

  /**
   * Shadow offset x of a pencil
   * @property
   * @type Number
   */
  shadowOffsetX: 0,

  /**
   * Shadow offset y of a pencil
   * @property
   * @type Number
   */
  shadowOffsetY: 0,

  /**
   * Constructor
   * @method initialize
   * @param {fabric.Canvas} canvas
   * @return {fabric.CircleBrush} Instance of a circle brush
   */
  initialize: function(canvas) {
    this.canvas = canvas;
    this.points = [ ];
  },

  /**
   * @method onMouseDown
   * @param {Object} pointer
   */
  onMouseDown: function() {
    this.points.length = 0;
    this.canvas.clearContext(this.canvas.contextTop);

    var ctx = this.canvas.contextTop;

    if (this.shadowBlur) {
      ctx.shadowBlur = this.shadowBlur;
      ctx.shadowColor = this.shadowColor || this.color;
      ctx.shadowOffsetX = this.shadowOffsetX;
      ctx.shadowOffsetY = this.shadowOffsetY;
    }
  },

  /**
   * @method onMouseMove
   * @param {Object} pointer
   */
  onMouseMove: function(pointer) {
    var point = this.addPoint(pointer);
    var ctx = this.canvas.contextTop;

    ctx.fillStyle = point.fill;
    ctx.beginPath();
    ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
  },

  /**
   * @method onMouseUp
   */
  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 circle = new fabric.Circle({
        radius: point.radius,
        left: point.x,
        top: point.y,
        fill: point.fill
      });
      this.canvas.add(circle);
    }

    this.canvas.renderOnAddition = originalRenderOnAddition;
    this.canvas.renderAll();
  },

  /**
   * @method addPoint
   * @param {Object} pointer
   * @return {fabric.Point} Just added pointer point
   */
  addPoint: function(pointer) {
    var pointerPoint = new fabric.Point(pointer.x, pointer.y);

    var circleRadius = fabric.util.getRandomInt(
                        Math.max(0, this.width - 20), this.width + 20) / 2;

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

    pointerPoint.radius = circleRadius;
    pointerPoint.fill = circleColor;

    this.points.push(pointerPoint);

    return pointerPoint;
  }
});