Shapes

A canvas plugin to draw geometrical shapes

live preview: https://canvas-shapes.herokuapp.com/

Requirements

• node > 10 (only for dev environment)

Integrations

• Travis ci
• codecov
• heroku

How to run

• Production: just open dist/index.html
• Development:

// install dependencies
$ yarn

// start develop server
$ yarn start:dev

Goal

Based on 3 random user points:

• Calculate the missing parallelogram point
• Calculate the parallelogram area
• Calculate the parallelogram center of mass
• Draw the parallelogram
• Draw a circle using the same parallelogram area and center of mass position

The user can put three random points on the screen. When the user adds a third point the app will calculate the fourth parallelogram point based on the inputted points. After that, the app will draw the parallelogram, the circle and show the calculated area.

Usage

User actions:

• Mouse click to put a point
• Mouse click and move when the draw is finished
• RESET button: reset the screen
• ABOUT button: informations