Skip to content

gdomiciano/draw-board

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

draw-board

Draw a parallelogram based on user's click.

image

How to use DrawBoard

The goal of DrawBoard is create a parallelogram with an inner circle. Follow the steps below to get to known the tool:

  • You are going to click in 3 different points inside the DrawBoard, each click will generate a red dot and a number;
  • As soon as you finish the third click, an paralelogram will be shown and the inner circle will be created;
  • You can check all information about what you drew on the left side, next to the board;
  • You can move the dots freely, in order to see the infotmation being updated;
  • You can reset the board any time, just click on the reset button positioned on the tight bottom of the board.
  • Have Fun!

About this web application

This is a web application developed using HTML5 Canvas, CSS and pure ES6 javascript.

Responsive: This application is tottaly responsive on desktop, tables and smatphone on landscape mode, however, only the board is shown on smatphone portrait mode.

Draggable dots: As far as this application has been tested, draggable feature works only on desktop.

Touchscreen interaction: The touch screen support is not only available on tablets and smarphone, but also on desktops that contains a touch screen.

Development tools:

Resolutions

Tablet:

image image

Smartphone (Galaxy Nexus 5):

image image