Fork Me on GitHub

Canvasbox

A HTML5 Tool what try to make more easy the development of Web Tool of Diagram Edition.

download .ZIPdownload .TGZ

Welcome to CanvasBox.

In this project we try to make the use of the javascript canvas more easy, simple and fast.

Key Points

Event-Driven

Into your canvas object you will be able to interact with personalized inside elements using events like onclick, ondrag, etc.

CoffeeScript

After many nights losed trying make object orientation in JavaScript to work properly, we decided to use CoffeeScript and focus our efforts on the development of our solution.

History

This project was born into the CodeToDiagram project, which needs a better Web GUI. But, as this javascript project grow up, we decided to make this javascript library a project itself.

Documentation

There is not a lot documentation yet, but we are working on it. For now, Take a look in the code and into the examples and you will see how this project it is very easy to understand and very cool to use it.

Examples

Drag Drop

This example focus into how to create, change and destroy many objects without big coding work. It shows too, how to manipulate the canvas box to override native events and deal with collision.

Drag Drop

Into this demo we will extends the canvas box polygon element reating this arrow element. This element changes colors, border with some classic events, like mouseover, onclick, drag and drop, etc.

You may note also some cool polygon features as rotate polygon, mouse over polygon, smooth polygon ( you can this last one. clicking on it ). Just double click the element to restore it.

Bubble Collision

This example focus into how to create, change and destroy many objects without big coding work. It shows too, how to manipulate the canvas box to override native events and deal with collision.

Bubble Collision

This example show how you can make collision using mouse events and keyboard events. Try drag and drop the elements and move them using the row keys.

Authors and Contributors

This project is bring to you by @thiagomata and @igormoreno. We hope you like it.

If you want colaborate, you can fork this project or talk with us.

Support the CanvasBox Project

Much time and energy has been put into the project, and there are a lot of new features on the way. You can suggest even more. If you like it and would like to say thanks, here's your chance!

We hope you like it.

If you want colaborate, you can fork this project or talk with us.