Свободный рисунок на холсте, используя fabric.js

Question

Я пытаюсь нарисовать свободный рисунок на холсте с помощью fabric.js, но я не могу свободно рисовать, как спрей, круг, режим текстуры на моей стороне. Я использую этот код только рисунок карандашного режима работает, но когда я выбираю спрей и другой режим, этот режим рисуется как карандаш.

Вот мой HTML Here is fiddle ink

  <label for="drawing-mode-selector">Mode:</label> 
      <select id="drawing-mode-selector"> 
       <option>Pencil</option> 
       <option>Circle</option> 
       <option>Spray</option> 
       <option>Pattern</option> 

       <option>hline</option> 
       <option>vline</option> 
       <option>square</option> 
       <option>diamond</option> 
       <option>texture</option> 
      </select><br> 
      <label for="drawing-line-width">Line width:</label> 
      <input type="range" value="30" min="0" max="150" id="drawing-   line-width"><br> 
      <label for="drawing-color">Line color:</label> 
      <input type="color" value="#005E7A" id="drawing-color"><br> 
      <label for="drawing-shadow-width">Line shadow width:</label> 
      <input type="range" value="0" min="0" max="50" id="drawing-shadow-width"><br> 
      </div> 
     </li> 

Вот мой код сценария

 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 

Смотрите здесь весь снимок я выбранный режим Vline но рисунок как простой карандаш

Answer 1

Я обновил ваш jsfiddle, теперь он работает Demo.

На вашей странице что-то не так - смотрите на своей консоли разработчика:

$('#drawing-mode-selector').on('change', function() { 
    //Uncaught TypeError: Object [object Object] has no method 'on'