How to draw a line using HTML 5 canvas and FabricJS?

Krunal Shah

Aug 22, 2017

1 min readLast Updated Dec 05, 2023

Introduction

Since last year we have been working closely with HTML5 Canvas and FabricJSto develop one of our product called Quick Capture. Quick Capture is chrome extension that allows you capture your browser screen, annotate it and share it over platforms like Google drive, Slack and direct link share.

We learned a lot over the year about the Canvas and FabricJS and now we would like to share that learning over series of blog.

In this article, we would sharing with you a small example of how we can draw a simple line on canvas using FabricJS library.

Lets Explore with JSFiddle example

Following JSFiddle will give you a detail idea about how we can draw and move a line on HTML Canvas.

Stay tuned for the part two of the blog in this we would be sharing about how we could draw an Arrow using the HTML5 Canvas and FabricJS.

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