Fabricjs - Custom Context

by MULLAINATHAN MANICKAM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<canvas id="c" width="632" height="485"></canvas>
<span class="tt1">DECAL SHAPE</span>
<select name="Decal Shape" id="clipingShape" style="height:30px;">
<option> WALL </option>
<option> CIRCLE </option>
<option> OVAL </option>
<option> CUSTOM </option>
</select>

CSS

canvas {  border:1px solid #000;     }
.controles {  margin:50px 0;   }

JavaScript

var canvas = new fabric.Canvas('c');
$("#clipingShape").change(function(e){
  var w, h;
  var ctx = canvas.getContext('2d');
  var shape =$('#clipingShape :selected').val();
  canvas.backgroundColor = 'red';
  if(shape=="WALL") {
    canvas.clipTo = null;
    canvas.backgroundColor = 'white';
    canvas.renderAll();
    return;
  }
	canvas.clipTo = function(ctx) {
   if(shape=="OVAL") {
     w=canvas.width / 4;
     h=canvas.height / 2.4;
     ctx.save();
     ctx.scale(2, 1.2);
     ctx.arc(w, h, 155, 0, 2 * Math.PI, true);
   }
   if(shape=="CIRCLE") {
     w=canvas.width / 2;
     h=canvas.height / 2;
     ctx.save();
     ctx.arc(w, h, 230, 0, Math.PI * 2,true); //  Circle Shape
   }
   if(shape=="CUSTOM") {
   		drawShape(ctx, 300, 210, 1, 1, true, true);
      ctx.save();
   }
   if(shape=="WALL") { 
     w=canvas.width - 100;
     h=canvas.height - 100;
     ctx.save();
     ctx.clear();
 	 }
   ctx.stroke();
   ctx.restore();
 };
 canvas.renderAll();
});
var text;
text = new fabric.Text('Welcome', {
  fontSize: 50,
  left: 100,
  top: 300,
  lineHeight: 1,
  originX: 'left',
  fontFamily: 'Helvetica',
  fontWeight: 'bold'
});
canvas.add(text);

function drawShape(ctx, xoff, yoff, sw, sh, fi, st) {
  ctx.beginPath();
  ctx.moveTo(xoff - 179*sw, yoff - 160*sh);
  ctx.bezierCurveTo(xoff - 125*sw, yoff - 233*sh, 10*sw + xoff, yoff - 243*sh, xoff - 1*sw, yoff - 233*sh);
  ctx.bezierCurveTo(xoff - 11*sw, yoff - 224*sh, 10*sw + xoff, yoff - 247*sh, 25*sw + xoff, yoff - 245*sh);
  ctx.bezierCurveTo(40*sw + xoff, yoff - 243*sh, 148*sw + xoff, yoff - 220*sh, 150*sw + xoff, yoff - 212*sh);
  ctx.bezierCurveTo(151*sw + xoff, yoff - 208*sh, 166*sw + xoff, yoff - 195*sh, 178*sw + xoff, yoff - 185*sh);
  ctx.bezierCurveTo(261*sw + xoff, yoff - 116*sh, 255*sw + xoff, yoff - 32*sh, 258*sw + xoff, yoff - 54*sh);
  ctx.bezierCurveTo(260*sw + xoff, yoff - 69*sh, 285*sw + xoff, 87*sh + yoff, 279*sw + xoff, 73*sh + yoff);
  ctx.bezierCurveTo(273*sw + xoff, 59*sh + yoff, 265*sw...