Draw canvas shape as an oval lauout using fabric.js

Question

On change event i am trying to draw canvas as oval shape, i am not getting proper property of canvas to draw this canvas in oval format.I have set the following property in my code see the following code.I tried this with css and i am getting perfect out put but when ia am trying convert canvas as png image that canvas shapes not going to converted in image so that's why , i want it in this way.

$("#decalshap").change(function() {
         alert("oval");
         var shap = $(this).val();
     if(shap=="oval")
        {
    canvas.set({
    height:314,
    width:500,       
    borderColor: 'red',
    borderRadius: 314.5/157.25,
    border:2,
    });  
 }

Answer will be appreciate.

Answer 1

for this you have to clipTo property ,use this code for drawing an oval in canvas //script

 var w;
 var h;
 var ctx = canvas.getContext('2d');
 w=canvas.width / 4;
 h=canvas.height / 2.4;
 canvas.clipTo = function(ctx) {
 ctx.save();
 ctx.scale(2, 1.2);
 ctx.arc(w, h, 90, 0, 2 * Math.PI, true);
 ctx.stroke();
 ctx.restore();
 //canvas.renderAll();
}

Here is the Fiddle DEMO