Canvas In Different Shapes With Fabricjs Plugin

I am trying to set canvas shape to circle and any other on click of button . but normal clip is not working with fabricjs . can you please share simple canvas shape example for my

Solution 1:

Try this hope will help you.

<select name="Decal Shape" id="decalshap"class="hasClass" style="height:30px;">
<option > Select Shape </option><optionvalue="oval"> OVAL </option><optionvalue="circle"> CIRCLE </option><optionvalue="rectangle">RECTANGLE</option><optionvalue="hrectangle"> HORIZONTAL RECTANGLE </option><optionvalue="vrectangle"> VERTICAL RECTANGLE </option>
</select>
<divid="work_area"></div>

    $("#decalshap").change(function() {
         alert("decal");
         var shap = $(this).val();
     if(shap=="oval")
        {
         var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:600
    }).appendTo('#work_area');
     var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   // ctx.fillStyle='rgba(70, 70, 255, 0.7)'// ctx.fillRect(20,20,150,100);var centerX = 0;
      var centerY = 0;
      var radius = 50;
      ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.scale(2, 1);
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      ctx.restore();
      ctx.fillStyle = '#8ED6FF';
      ctx.fill();
      ctx.lineWidth = 5;
      ctx.strokeStyle = 'black';
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    }  
    if(shap=="circle")
        {
          var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:600
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();
       }
       if(shap=="hrectangle")
        {
        var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:1200,
        height:300
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   ctx.fillStyle='border: 1px dotted';
    ctx.fillRect(0,0,200,400);
       }
       if(shap=="vrectangle")
        {
          var elementID = 'canvas' + $('canvas').length;
         $('<canvas>').attr({
        id: elementID
    }).css({
        width:300,
        height:600
    }).appendTo('#work_area');
    var canvas = document.getElementById(elementID);
   var ctx = canvas.getContext('2d');
   ctx.fillStyle='border: 1px dotted';
    ctx.fillRect(0,0,400,200);
       }
       });

Solution 2:

try this script to convert your Canvas in circle shapes with fabricjs.You can clip your canvas to any shape using clipTo function as i clip my canvas in circle shape

//html

<canvas id="c" width="400" height="300"></canvas>

//script

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'red';
var w=canvas.width / 2;
var h=canvas.height / 2;
canvas.clipTo = function(ctx) {

 //ctx.scale(2, 1);
ctx.arc(w, h, 150, 0, Math.PI * 2,true);

};
 canvas.renderAll();
var text;
text = new fabric.Text('Honey', {
  fontSize: 50,
  left: 100,
  top: 100,
  lineHeight: 1,
  originX: 'left',
  fontFamily: 'Helvetica',
  fontWeight: 'bold'
});
canvas.add(text);

//css

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

Here is my fiddle demo hope it will help you.