Drawing a square or rectangle over HTML5 canvas using FabricJS.

Krunal Shah

Aug 28, 2017 | 1 min read

I hope the you have followed last blog “Draw an arrow using HTML 5 canvas and FabricJS” and got hand over how the HTML5 canvas and FabricJS works. In this installment of the blog we are sharing a bit more complex shape a polygon with 4 lines i.e. a Square or Rectangle.

Once again we have created a demo on JSFiddle for you to go through as we believe in practical implementation rather than the theoretical discussions. So check out the JSFiddle code below and you can edit the code on JSFiddle to play around our stock code and test your learning.

By now we have shared the code to work line, arrow, square and rectangle so what next? Obviously, we need to learn the basic shapes first so the next blog will give you an idea about how to draw circle.

Hope you enjoyed the code…

Happy coding!

· · · ·

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.