CODEWITHSUNDEEP
fabricjs
Naman Joshi
Naman Joshi

Reputation: 21

How to create ellipse shape in canvas?

I'm new to canvas. How can I create ellipse shape in canvas using fabricjs?

(function() {
  var canvas = this.__canvas = new fabric.StaticCanvas('canvas');

  canvas.add(
    new fabric.Rect({
      top: 100,
      left: 100,
      width: 50,
      height: 50,
      fill: '#f55'
    }),
    new fabric.Circle({
      top: 140,
      left: 230,
      radius: 75,
      fill: 'green',
      angle: 0
    }),
    //new fabric.Ellipse({ originX: 140, originY: 230, angle: 20, fill: 'green' }),
    new fabric.Triangle({
      top: 300,
      left: 210,
      width: 100,
      height: 100,
      fill: 'blue'
    })
  );

  fabric.Image.fromURL('../lib/pug.jpg', function(img) {
    canvas.add(img.set({
      left: 400,
      top: 350,
      angle: 30
    }).scale(0.25));
  });
})();

Upvotes: 2

Views: 898

Answers (2)

Durga
Durga

Reputation: 15604

You need to create an object of fabric.Ellipse and use properties rx: for horizontal radius and ry: for vertical radius of ellipse.

DEMO

var canvas = new fabric.Canvas('c');
var ellipse = new fabric.Ellipse({
  left: 20,
  top: 20,
  rx: 150,
  ry: 50,
  fill: 'yellow'
});
canvas.add(ellipse);
canvas{
 border : 2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>

Upvotes: 1

user5986440
user5986440

Reputation:

This can be achieved by using the Fabric Ellipse class.

See below an example: 

ellip = new fabric.Ellipse({
  left: 50,
  top: 50,
  strokeWidth: 1,
  stroke: 'black',
  fill: 'white',
  selectable: true,
  originX: 'center', 
  originY: 'center',
  rx: 5,
  ry: 1
});

canvas.add(ellip);

Upvotes: 1

Related Questions