Drawing a square or rectangle over HTML5 canvas using FabricJS.

Krunal Shah

Aug 28, 2017

1 min readLast Updated Jul 13, 2023

Drawing a square or rectangle over HTML5 canvas using FabricJS

Introduction

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.

Lets explore using JSFiddle

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.

Projects Completed till now.

Discover how we can help your business grow.

"Third Rock Techkno's work integrates complex frameworks and features to offer everything researchers need. They are open-minded and worked smoothly with the academic subject matter."

- Dr Daniel T. Michaels, NINS

Related Resources

Our Services

You May Also Like