Click the canvas! app

About me

My name is John Cely, I was born in Colombia and I've been developing software for seven years.

The solution

This is my solution for the geometrical shapes JS assignment.

The tools and APIs I used

• TypeScript 3 as I think having types in a language is a great feature for writing more readable code.
• HTML 5 canvas API because I think it is the perfect fit for this kind of application.
• FabricJS is a library on top of the canvas API that provides a high level interface for painting, listening for events and updating the canvas.

How it works?

It's very easy, simply click on the grey space 3 times, each click will set a point. After the third point, the app will find a fourth one in such a way that they'll match the vertices of a parallelogram. A yellow circle will be painted. This circle will have the same area and center of mass as the parallelogram.

After that you will be able to drag any point, and as you do it, a second point will also move causing the figure to remain a parallelogram. The circle will move and resize accordingly.