JS Canvas Shapes Draw: Display freehand geometric shapes using canvas

Recommend this page to a friend!
  Info   View files Documentation   Screenshots Screenshots   View files View files (89)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 101 All time: 410 This week: 3Up
Version License JavaScript version Categories
canvasshapes 1.0.0GNU General Publi...1.0Graphics, Libraries
Description Author

This package can display freehand geometric shapes using canvas object.

It provides a user interface for letting the users define geometric shapes to be rendered on a canvas object.

The shapes may be defined with freehand drawings that the user can create using a user interface to view the coordinates of the shapes points and other tools that help drawing like zooming, saving, clearing and deleting.

Innovation Award
JavaScript Programming Innovation award nominee
April 2016
Number 2


Prize: One ebook of choice by Packt
Sometimes it is useful to let the users draw diagrams made of geometric shapes to represent important information.

This package lets the user create diagrams by drawing geometric shapes on a canvas with freehand.

Manuel Lemos
Picture of Juan Jose
  Performance   Level  
Name: Juan Jose <contact>
Classes: 3 packages by
Country: Spain Spain
Age: 51
All time rank: 1348 in Spain Spain
Week rank: 6 Up2 in Spain Spain Up
Innovation award
Innovation award
Nominee: 2x

Winner: 1x

Details

> ----------------------------------------------------------------------------------------------------- > 'canvasShapes' (namespace) - Library of creation, manipulation and calculation of plane geometric figures. > Library: 'PolyArea'. > Author: Juan José Guerra Haba - dinertron@gmail.com - Marzo de 2016 > License: Free BSD. & Open GPL v.3. Keep credit, please. > Versión: 0.9.0 BETA > File: canvasShapes.js Main Class: PolyArea.js > > ----------------------------------------------------------------------------------------------------

canvasShapes

It is a library for drawing geometric figures associated events.

It shows geometric calculations (areas, perimeters, ...) and supports a free drawn mode "freehand"; also it has a graphical interface with buttons bar and an options window where display / modify some of the multiple parameters supported.

'CANVAS-SHAPES' is actually a namespace that hold the library 'PolyArea' which is responsible for the bulk of drawn figures, but also houses objects and methods useful in separate modules. HTML element works on a 'canvas' that constructs itself and on which it has implemented a reception event for the creation and modified the figures (points, segments, ...)

Usage

After loading the file in the 'head' zone (<script src = "... / canvasShapes.js" ...> </ script>) you can start to use the library under the namespace: 'canvasShapes'. It could commence for example, with the viewing of the UI by the method:

canvasShapes.render( {id: "idElement"} );

where the string 'idElement' is expected that identifies the container element, that is, the element in which all imbibing UI. From here everything is done visually and interactively in the GUI.

Features:

  • OOP Philosophy, classes, inheritance, modularity, abstraction, ...
  • ECMASCRIPT 6 features: `"use-strict"`.
  • Cross-Browser.
  • Modularity and abstraction by js-modules and Closures.
  • Grouping of modules in a single file to simplify the call in the 'head'.
  • Self-content CSS, media-queries, 'bootstrap' patterns.
  • OUTSTANDING !! : Assigning events to the figures in the 'canvas'. This is really INNOVATIVE and that everyone knows that drawn on a canvas does not allow events, since they are not objects, but the library does implement recognizing the figures drawn as objects.

Developing

Developed by GuerraTron @2016

Tools

Notepad ++

Created with Nodeclipse (Eclipse Marketplace, site) Nodeclipse is free open-source project that grows with your contributions.

Author:

<cite>I hope it can be useful to someone as it has been for me. In this case it would be appreciated email commenting use or suggestions for future improvements.</cite> &nbsp;

 ¡ KEEP CREDITS, PLEASE !
Screenshots  
  • canvasShapes-logo.png
  • zoneCoordinates.png
  • zoneOptions.png
  • zonesGUI.png
  Files folder image Files  
File Role Description
Files folder imagecanvasShapes-en (3 files, 4 directories)
Files folder imagecanvasShapes-es (3 files, 3 directories)
Accessible without login HTML file index.html Data web accesss page
Accessible without login Plain text file LICENSE Lic. GNU GPL v3
Accessible without login Plain text file README.md Data readme info

  Files folder image Files  /  canvasShapes-en  
File Role Description
Files folder imagedoc (6 files, 6 directories)
Files folder imagehelp (1 file)
Files folder imageimg (5 files)
Files folder imagestatic (1 file)
  Plain text file canvasShapes-All.en.js Class all modules in a single file (English)
  Accessible without login Image file canvasShapes-logo.png Icon logo canvasShapes
  Accessible without login Image file zonesGUI.png Data canvasShapes GUI areas

  Files folder image Files  /  canvasShapes-en  /  doc  
File Role Description
Files folder imagecss (1 file)
Files folder imagefonts (6 files)
Files folder imageimg (12 files)
Files folder imagejs (2 files)
Files folder imagescripts (1 file, 1 directory)
Files folder imagestyles (3 files)
  Accessible without login HTML file canvasShapes-All.en.js.html Doc. lines of canvasShapes documentation code (English)
  Accessible without login Image file favicon.ico Data icon canvasShapes
  Accessible without login HTML file global.html Doc. documentation global page (English)
  Accessible without login HTML file index.html Doc. documentation main page (English)
  Accessible without login HTML file tutorial-examples_canvasShapes.en.html Doc. example page (English)
  Accessible without login HTML file tutorial-tuto_canvasShapes.en.html Doc. turoial page (English)

  Files folder image Files  /  canvasShapes-en  /  doc  /  css  
File Role Description
  Accessible without login Plain text file tuto.css Doc. documentation style file

  Files folder image Files  /  canvasShapes-en  /  doc  /  fonts  
File Role Description
  Accessible without login Plain text file OpenSans-Bold-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-BoldItalic-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-Italic-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-Light-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-LightItalic-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-Regular-webfont.svg Doc. documentation text font

  Files folder image Files  /  canvasShapes-en  /  doc  /  img  
File Role Description
  Accessible without login Image file canvasShapes-logo-mini.gif Icon mini logo
  Accessible without login Image file canvasShapes-logo.png Icon logo
  Accessible without login Image file canvasShapesButtons.png Icon GUI buttons
  Accessible without login Image file canvasShapesInputs.png Icon GUI inputs
  Accessible without login Image file favicon.ico Data icon
  Accessible without login Image file fondo.png Data documentation background image
  Accessible without login Image file fondo_inv.png Data documentation background image (inverse)
  Accessible without login Image file guerratron.gif Icon author logo
  Accessible without login Image file torotron_logo.png Icon authors logo
  Accessible without login Image file zoneCoordinates.png Icon GUI coordinates area
  Accessible without login Image file zoneOptions.png Data GUI options area
  Accessible without login Image file zonesGUI.png Data GUI areas

  Files folder image Files  /  canvasShapes-en  /  doc  /  js  
File Role Description
  Plain text file canvasShapes-All.en.min.js Class canvasShapes All-in-one minified (English)
  Plain text file canvasShapes-All.es.min.js Class canvasShapes All-in-one minified (Spanish)

  Files folder image Files  /  canvasShapes-en  /  doc  /  scripts  
File Role Description
Files folder imageprettify (3 files)
  Accessible without login Plain text file linenumber.js Aux. documentation assets

  Files folder image Files  /  canvasShapes-en  /  doc  /  scripts  /  prettify  
File Role Description
  Accessible without login Plain text file Apache-License-2.0.txt Doc. documentation assets
  Accessible without login Plain text file lang-css.js Aux. documentation assets
  Accessible without login Plain text file prettify.js Aux. documentation assets

  Files folder image Files  /  canvasShapes-en  /  doc  /  styles  
File Role Description
  Accessible without login Plain text file jsdoc-default.css Doc. documentation assets
  Accessible without login Plain text file prettify-jsdoc.css Doc. documentation assets
  Accessible without login Plain text file prettify-tomorrow.css Doc. documentation assets

  Files folder image Files  /  canvasShapes-en  /  help  
File Role Description
  Accessible without login Plain text file README.md Data readme info file (English)

  Files folder image Files  /  canvasShapes-en  /  img  
File Role Description
  Accessible without login Image file canvasShapes-logo-mini.gif Icon mini logo
  Accessible without login Image file canvasShapes-logo.png Icon logo
  Accessible without login Image file favicon.ico Data icon
  Accessible without login Image file guerratron.gif Icon author icon
  Accessible without login Image file zonesGUI.png Data canvasShapes GUI areas

  Files folder image Files  /  canvasShapes-en  /  static  
File Role Description
  Accessible without login Image file favicon.ico Data icon

  Files folder image Files  /  canvasShapes-es  
File Role Description
Files folder imagedoc (6 files, 6 directories)
Files folder imagehelp (1 file)
Files folder imageimg (5 files)
  Plain text file canvasShapes-All.es.js Class all modules in a single file (Spanish)
  Accessible without login Image file canvasShapes-logo.png Icon logo canvasShapes
  Accessible without login Image file zonesGUI.png Data canvasShapes GUI areas

  Files folder image Files  /  canvasShapes-es  /  doc  
File Role Description
Files folder imagecss (1 file)
Files folder imagefonts (6 files)
Files folder imageimg (12 files)
Files folder imagejs (1 file)
Files folder imagescripts (1 file, 1 directory)
Files folder imagestyles (3 files)
  Accessible without login HTML file canvasShapes-All.es.js.html Doc. canvasShapes file code (Spanish)
  Accessible without login Image file favicon.ico Data icon
  Accessible without login HTML file global.html Doc. documentation global page (Spanish)
  Accessible without login HTML file index.html Doc. documentation main page (Spanish)
  Accessible without login HTML file tutorial-examples_canvasShapes.es.html Doc. example page (Spanish)
  Accessible without login HTML file tutorial-tuto_canvasShapes.es.html Doc. tutorial page (Spanish)

  Files folder image Files  /  canvasShapes-es  /  doc  /  css  
File Role Description
  Accessible without login Plain text file tuto.css Doc. documentation assets

  Files folder image Files  /  canvasShapes-es  /  doc  /  fonts  
File Role Description
  Accessible without login Plain text file OpenSans-Bold-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-BoldItalic-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-Italic-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-Light-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-LightItalic-webfont.svg Doc. documentation text font
  Accessible without login Plain text file OpenSans-Regular-webfont.svg Doc. documentation text font

  Files folder image Files  /  canvasShapes-es  /  doc  /  img  
File Role Description
  Accessible without login Image file canvasShapes-logo-mini.gif Icon mini logo
  Accessible without login Image file canvasShapes-logo.png Icon logo
  Accessible without login Image file canvasShapesButtons.png Icon GUI buttons area
  Accessible without login Image file canvasShapesInputs.png Icon GUI inputs area
  Accessible without login Image file favicon.ico Data icon
  Accessible without login Image file fondo.png Data documentation background image
  Accessible without login Image file fondo_inv.png Data documentation background image (reverse)
  Accessible without login Image file guerratron.gif Icon author logo
  Accessible without login Image file torotron_logo.png Icon authors logo
  Accessible without login Image file zoneCoordinates.png Icon GUI coordinates area
  Accessible without login Image file zoneOptions.png Data GUI options area
  Accessible without login Image file zonesGUI.png Data GUI areas

  Files folder image Files  /  canvasShapes-es  /  doc  /  js  
File Role Description
  Plain text file canvasShapes-All.es.min.js Class canvasShapes All-in-one minified

  Files folder image Files  /  canvasShapes-es  /  doc  /  scripts  
File Role Description
Files folder imageprettify (3 files)
  Accessible without login Plain text file linenumber.js Aux. documentation assets

  Files folder image Files  /  canvasShapes-es  /  doc  /  scripts  /  prettify  
File Role Description
  Accessible without login Plain text file Apache-License-2.0.txt Doc. documentation assets
  Accessible without login Plain text file lang-css.js Aux. documentation assets
  Accessible without login Plain text file prettify.js Aux. documentation assets

  Files folder image Files  /  canvasShapes-es  /  doc  /  styles  
File Role Description
  Accessible without login Plain text file jsdoc-default.css Doc. documentation assets
  Accessible without login Plain text file prettify-jsdoc.css Doc. documentation assets
  Accessible without login Plain text file prettify-tomorrow.css Doc. documentation assets

  Files folder image Files  /  canvasShapes-es  /  help  
File Role Description
  Accessible without login Plain text file LEEME.md Data readme info file (Spanish)

  Files folder image Files  /  canvasShapes-es  /  img  
File Role Description
  Accessible without login Image file canvasShapes-logo-mini.gif Icon mini logo
  Accessible without login Image file canvasShapes-logo.png Icon logo
  Accessible without login Image file favicon.ico Data icon
  Accessible without login Image file guerratron.gif Icon author logo
  Accessible without login Image file zonesGUI.png Data canvasShapes GUI areas

 Version Control Unique User Downloads Download Rankings  
 95%
Total:101
This week:0
All time:410
This week:3Up