javascript - Fabricjs freedrawing hline brush -

i following create freedrawing here: http://fabricjs.com/freedrawing/ working fine pencil,circle,spray & pattern isn't working hline,vline,square,diamond & texture. had defined canvas earlier this:

$(document).ready(function () {     //setup front side canvas      canvas = new fabric.canvas('tcanvas', {         hovercursor: 'pointer',         selection: true,         selectionbordercolor: 'blue'     }); }); 

i have created free drawing function this:

function getfabricbrush(mood) {     var mood;     if (mood === 'hline') {         canvas.freedrawingbrush = vlinepatternbrush;     } else if (mood === 'vline') {         canvas.freedrawingbrush = hlinepatternbrush;     } else if (mood === 'square') {         canvas.freedrawingbrush = squarepatternbrush;     } else if (mood === 'diamond') {         canvas.freedrawingbrush = diamondpatternbrush;     } else if (mood === 'texture') {         canvas.freedrawingbrush = texturepatternbrush;     } else {         canvas.freedrawingbrush = new fabric[mood + 'brush'](canvas);     }      if (canvas.freedrawingbrush) {         canvas.freedrawingbrush.color = $("#drawing-color").val();         canvas.freedrawingbrush.width = parseint($("#drawing-line-width").val(), 10) || 1;         canvas.freedrawingbrush.shadowblur = parseint($("#drawing-shadow-width").val(), 10) || 0;         canvas.freedrawingbrush.shadowcolor = $("#drawing-shadow-color").val();         canvas.freedrawingbrush.shadowoffsety = parseint($("#drawing-shadow-offset").val(), 10) || 0;     } }  var vlinepatternbrush = new fabric.patternbrush(canvas); vlinepatternbrush.getpatternsrc = function () {     this.canvas = canvas;     var patterncanvas = fabric.document.createelement('canvas');     patterncanvas.width = patterncanvas.height = 10;     var ctx = patterncanvas.getcontext('2d');      ctx.strokestyle = $("#drawing-color").val();     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 = $("#drawing-color").val();     ctx.linewidth = 5;     ctx.beginpath();     ctx.moveto(5, 0);     ctx.lineto(5, 10);     ctx.closepath();     ctx.stroke();     return patterncanvas; }; 

all above code had added in separate file custom.js & calling function in index.html file this:

$("#drawing-mode-selector").on("change", function (){     getfabricbrush($(this).val()); }); 

but when clicking on canvas area getting error:

typeerror: this.canvas undefined fabric.js:7356:8
typeerror: this.canvas undefined fabric.js:7436:6

this happening hline,vline,square,diamond & texture. in did mistake? idea?