Sketching circle of a HTML5 Canvas using the FabricJS

Krunal Shah

Sep 09, 2017 | 2 min read

Concept of circleSketching circle of a HTML5 Canvas using the FabricJS

Aaha! we are back with the fourth blog where we are sharing our learning of using FabricJS to sketch thing over HTML5 canvas. Please check the below mentioned links to get updated with the earlier blogs about drawing simple shapes using FabricJS with HTML5 canvas.

  1. )How to draw a line using HTML 5 canvas and FabricJS?
  2. )Draw an arrow using HTML 5 canvas and FabricJS
  3. )Drawing a square or rectangle over HTML5 canvas using FabricJS.

Hope you by now you have get the good foothold with FabricJS and HTML5 canvas concepts. Checkout the JSFiddle below to sketch the circle on an HTML5 canvas.

Hey, by now you have got the hands-on to draw shapes like line, arrow, square,rectangle and now you have the circle. We would suggest that you create a small demo application with this learning. Third Rock Techkno is eager to see what brilliant ideas does their followers and readers have. You can share us your demo on contact@thirdrocktechkno.com .

Here is what we had created using the FabricJS and HTML5 canvas. We have created a chrome extension called Quick Capture. The extension is a screen capture and annotation tool. The extension can easily capture your browser or desktop screen. You can then annotate that captured screen with the array of the tools as you need and share it over Google drive, Slack or save it to the Quick Capture server.

Hope you enjoyed the code…

Happy coding!

Do share your feedback. And don’t forget to checkout Third Rock Techkno ‘s extension Quick Capture :)

· · · ·

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.