Geometric Shapes Fabric.js

Question

I want to use different geometric shapes (e.g. hexagon, star ...) except 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 do this using 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 forms you should download SVGs

Answer 2

You can build any polygon (hexagon, star, etc.) using 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 the desired 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 number of spikes as follows:

 // 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 desired geometric shape, you must calculate the vertices and transfer these vertices to Fabric.Polygon

Here is a sample code and 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>