- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Fabric.js – How to draw a hexagonal grid (honey comb) with Polygon class
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc.
Syntax
new fabric.Polygon( points: Array, options: Object )
Parameters
points − This parameter accepts an Array which denotes the array of points that make up the polygon object.
options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the Polygon object.
Example 1: Drawing a Hexagon using Polygon
Let’s see a code example to see how we draw a hexagon using polygon. We can draw many types of hexagons, however, in this example we will draw a regular hexagon. We know that a regular hexagon has six equal sides.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Drawing a Hexagon using Polygon</h2> <p>You can see a hexagon object has been added to the canvas</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating the angle of the hexagon const a = (2 * Math.PI) / 6; // Initiating the radius of the circle const r = 50; // Initiate a polygon object var hexagon = new fabric.Polygon( [ { x: 50, y: 0 }, { x: 25, y: 43.30}, { x: -25, y: 43.301 }, { x: -50, y: 0}, { x: -25, y: -43.301}, { x: 25, y: -43.301 }, ], { stroke: "red", left: 140, top: 10, strokeWidth: 2, strokeLineJoin: "bevil", } ); // Adding it to the canvas canvas.add(hexagon); </script> </body> </html>
Example 2: Drawing a Hexagonal grid using Polygon
Let’s see a code example to see how we can create a hexagonal grid. We can simply initiate a function called drawHexagon(m,n) where (m,n) is the center point of a hexagon. This function will draw the hexagon whenever it is called. We also initiate the drawGrid(width, height) function which draws the consecutive hexagons by calculating where the next center for the successive hexagons is going to be located.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Drawing a Hexagonal grid using Polygon</h2> <p>You can see that a hexagonal grid has been drawn</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a polygon object function drawHexagon(left, top) { var hexagon = new fabric.Polygon( [ { x: 50, y: 0 }, { x: 25, y: 43.30}, { x: -25, y: 43.301 }, { x: -50, y: 0}, { x: -25, y: -43.301}, { x: 25, y: -43.301 }, ], { stroke: "#EEC33D", fill: "#BB900C", strokeWidth: 5, left: left, top: top } ); // Adding it to the canvas canvas.add(hexagon); } // Initiating the drawGrid function function drawGrid() { for (let y = 1; y < 4; y++) { drawHexagon(80*y,45*y) } for (let y = 1; y < 4; y++) { drawHexagon(80*y+160,45*y) } for (let y = 1; y < 4; y++) { drawHexagon(80*y+320,45*y) } } // Calling drawGrid function drawGrid(); </script> </body> </html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can FabricJS to draw a hexagonal grid with Polygon class.