title: Free drawing on canvas using fabric.js
body: <p>I am trying to draw a free drawing on canvas using fabric.js but i am not able to free draw a like spray, circle, texture mode on my side i use this  code only the pencil mode drawing is working but when i select spray and other mode that mode drawing as pencil.</p>
  
  <p>Here is my HTML <a href="http://jsfiddle.net/RDqTd/" rel="nofollow noreferrer">Here is fiddle ink</a></p>
  
  <pre><code>            &lt;label for="drawing-mode-selector"&gt;Mode:&lt;/label&gt;
              &lt;select id="drawing-mode-selector"&gt;
                &lt;option&gt;Pencil&lt;/option&gt;
                &lt;option&gt;Circle&lt;/option&gt;
                &lt;option&gt;Spray&lt;/option&gt;
                &lt;option&gt;Pattern&lt;/option&gt;
  
                &lt;option&gt;hline&lt;/option&gt;
                &lt;option&gt;vline&lt;/option&gt;
                &lt;option&gt;square&lt;/option&gt;
                &lt;option&gt;diamond&lt;/option&gt;
                &lt;option&gt;texture&lt;/option&gt;
              &lt;/select&gt;&lt;br&gt;
              &lt;label for="drawing-line-width"&gt;Line width:&lt;/label&gt;
              &lt;input type="range" value="30" min="0" max="150" id="drawing-            line-width"&gt;&lt;br&gt;
              &lt;label for="drawing-color"&gt;Line color:&lt;/label&gt;
              &lt;input type="color" value="#005E7A" id="drawing-color"&gt;&lt;br&gt;
              &lt;label for="drawing-shadow-width"&gt;Line shadow width:&lt;/label&gt;
              &lt;input type="range" value="0" min="0" max="50" id="drawing-shadow-width"&gt;&lt;br&gt;
            &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>Here is my script code</p>
  
  <pre><code>     var canvas = new fabric.Canvas('canvas')
       var drawingModeEl = document.getElementById('drawing-mode'),
        drawingOptionsEl = document.getElementById('drawing-mode-options'),
        drawingColorEl = document.getElementById('drawing-color'),
        drawingLineWidthEl = document.getElementById('drawing-line-width'),
        drawingShadowWidth = document.getElementById('drawing-shadow-width');
  
       drawingModeEl.onclick = function() {
      canvas.isDrawingMode = !canvas.isDrawingMode;
      if (canvas.isDrawingMode) {
        drawingModeEl.innerHTML = 'Cancel drawing mode';
        drawingOptionsEl.style.display = '';
      }
      else {
        drawingModeEl.innerHTML = 'Enter drawing mode';
        drawingOptionsEl.style.display = 'none';
      }
    };
  
    canvas.on('path:created', function() {
      updateComplexity();
    });
  
    if (fabric.PatternBrush) {
      var vLinePatternBrush = new fabric.PatternBrush(canvas);
      vLinePatternBrush.getPatternSrc = function() {
  
        var patternCanvas = fabric.document.createElement('canvas');
        patternCanvas.width = patternCanvas.height = 10;
        var ctx = patternCanvas.getContext('2d');
  
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(0, 5);
        ctx.lineTo(10, 5);
        ctx.closePath();
        ctx.stroke();
  
        return patternCanvas;
      };
  
      var hLinePatternBrush = new fabric.PatternBrush(canvas);
      hLinePatternBrush.getPatternSrc = function() {
  
        var patternCanvas = fabric.document.createElement('canvas');
        patternCanvas.width = patternCanvas.height = 10;
        var ctx = patternCanvas.getContext('2d');
  
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(5, 0);
        ctx.lineTo(5, 10);
        ctx.closePath();
        ctx.stroke();
  
        return patternCanvas;
      };
  
      var squarePatternBrush = new fabric.PatternBrush(canvas);
      squarePatternBrush.getPatternSrc = function() {
  
        var squareWidth = 10, squareDistance = 2;
  
        var patternCanvas = fabric.document.createElement('canvas');
        patternCanvas.width = patternCanvas.height = squareWidth + squareDistance;
        var ctx = patternCanvas.getContext('2d');
  
        ctx.fillStyle = this.color;
        ctx.fillRect(0, 0, squareWidth, squareWidth);
  
        return patternCanvas;
      };
  
      var diamondPatternBrush = new fabric.PatternBrush(canvas);
      diamondPatternBrush.getPatternSrc = function() {
  
        var squareWidth = 10, squareDistance = 5;
        var patternCanvas = fabric.document.createElement('canvas');
        var rect = new fabric.Rect({
          width: squareWidth,
          height: squareWidth,
          angle: 45,
          fill: this.color
        });
  
        var canvasWidth = rect.getBoundingRectWidth();
  
        patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
        rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });
  
        var ctx = patternCanvas.getContext('2d');
        rect.render(ctx);
  
        return patternCanvas;
      };
  
      var img = new Image();
      img.src = '../assets/honey_im_subtle.png';
  
      var texturePatternBrush = new fabric.PatternBrush(canvas);
      texturePatternBrush.source = img;
    }
  
    $('#drawing-mode-selector').on('change', function() {
  
      if (this.value === 'hline') {
        canvas.freeDrawingBrush = vLinePatternBrush;
      }
      else if (this.value === 'vline') {
        canvas.freeDrawingBrush = hLinePatternBrush;
      }
      else if (this.value === 'square') {
        canvas.freeDrawingBrush = squarePatternBrush;
      }
      else if (this.value === 'diamond') {
        canvas.freeDrawingBrush = diamondPatternBrush;
      }
      else if (this.value === 'texture') {
        canvas.freeDrawingBrush = texturePatternBrush;
      }
      else {
        canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas);
      }
  
      if (canvas.freeDrawingBrush) {
        canvas.freeDrawingBrush.color = drawingColorEl.value;
        canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
        canvas.freeDrawingBrush.shadowBlur = parseInt(drawingShadowWidth.value, 10) || 0;
      }
    });
  
    drawingColorEl.onchange = function() {
      canvas.freeDrawingBrush.color = drawingColorEl.value;
    };
    drawingLineWidthEl.onchange = function() {
      canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
    };
    drawingShadowWidth.onchange = function() {
      canvas.freeDrawingBrush.shadowBlur = parseInt(drawingShadowWidth.value, 10) || 0;
    };
  
    if (canvas.freeDrawingBrush) {
      canvas.freeDrawingBrush.color = drawingColorEl.value;
      canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
      canvas.freeDrawingBrush.shadowBlur = 0;
    }
  
    var canvas = new fabric.Canvas('c');
  document.getElementById('canvas-background-picker').onchange = function() {
      canvas.backgroundColor = this.value;
      canvas.renderAll();
    };
  //end free drawing
  </code></pre>
  
  <p>See here a entire screenshot i have selected mode vline but it drawing like simple   pencil
     <img src="https://i.stack.imgur.com/B7eju.jpg" alt="See here a entire screenshot i have selected mode vline but it drawing like simple   pencil "></p>