Fabric.js geometric shapes

Question

I want to use different geometric shapes (like hexagon, star...) apart from Rect, Triangle, Ellipse.What else can I do? How can I do?

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  fill: 'green',
  width: 40,
  height: 80
});
var circle = new fabric.Circle({
  radius: 20, 
  fill: 'red', 
  left: 100, 
  top: 100
});

Answer 1

You can build any polygon (hexagon,star,etc) using a Fabric.Polygon.

var myPoly = new fabric.Polygon(points, {
    stroke: 'red',
    left: 50,
    top: 50,
    strokeWidth: 2,
    strokeLineJoin: 'bevil'
},false);
canvas.add(myPoly);

You can calculate the vertex points of any regular polygon with your desired side count like this:

// get the vertices of a hexagon with a radius of 30
var points=regularPolygonPoints(6,30);

function regularPolygonPoints(sideCount,radius){
    var sweep=Math.PI*2/sideCount;
    var cx=radius;
    var cy=radius;
    var points=[];
    for(var i=0;i<sideCount;i++){
        var x=cx+radius*Math.cos(i*sweep);
        var y=cy+radius*Math.sin(i*sweep);
        points.push({x:x,y:y});
    }
    return(points);
}

You can calculate the vertex points of any star with your desired spike count like this:

// get the vertices of a hexagon with a radius of 30
var points=starPolygonPoints(5,50,25);

function starPolygonPoints(spikeCount, outerRadius, innerRadius) {
  var rot = Math.PI / 2 * 3;
  var cx = outerRadius;
  var cy = outerRadius;
  var sweep = Math.PI / spikeCount;
  var points = [];
  var angle = 0;

  for (var i = 0; i < spikeCount; i++) {
    var x = cx + Math.cos(angle) * outerRadius;
    var y = cy + Math.sin(angle) * outerRadius;
    points.push({x: x, y: y});
    angle += sweep;

    x = cx + Math.cos(angle) * innerRadius;
    y = cy + Math.sin(angle) * innerRadius;
    points.push({x: x, y: y});
    angle += sweep
  }
  return (points);
}

So, in general, for any geometric shape you desire, you must calculate the vertices and feed those vertices into a Fabric.Polygon

Here's example code and a Demo:

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('canvas');

// make a hexagon
var points=regularPolygonPoints(6,30);

var myPoly = new fabric.Polygon(points, {
  stroke: 'red',
  left: 10,
  top: 10,
  strokeWidth: 2,
  strokeLineJoin: 'bevil'
},false);
canvas.add(myPoly);

// make a star
var points=starPolygonPoints(5,50,25);

var myStar = new fabric.Polygon(points, {
  stroke: 'red',
  left: 100,
  top: 10,
  strokeWidth: 2,
  strokeLineJoin: 'bevil'
},false);
canvas.add(myStar);


function regularPolygonPoints(sideCount,radius){
  var sweep=Math.PI*2/sideCount;
  var cx=radius;
  var cy=radius;
  var points=[];
  for(var i=0;i<sideCount;i++){
    var x=cx+radius*Math.cos(i*sweep);
    var y=cy+radius*Math.sin(i*sweep);
    points.push({x:x,y:y});
  }
  return(points);
}


function starPolygonPoints(spikeCount, outerRadius, innerRadius) {
  var rot = Math.PI / 2 * 3;
  var cx = outerRadius;
  var cy = outerRadius;
  var sweep = Math.PI / spikeCount;
  var points = [];
  var angle = 0;

  for (var i = 0; i < spikeCount; i++) {
    var x = cx + Math.cos(angle) * outerRadius;
    var y = cy + Math.sin(angle) * outerRadius;
    points.push({x: x, y: y});
    angle += sweep;

    x = cx + Math.cos(angle) * innerRadius;
    y = cy + Math.sin(angle) * innerRadius;
    points.push({x: x, y: y});
    angle += sweep
  }
  return (points);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>

Answer 2

You can do it with the Polygon function:

var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

For more complex shapes you should load SVGs