“LibCanvas” - framework for working with Javascript Canvas, part two

Hi, Habr! I want to tell you about the new library, which helps to very easily and gracefully draw all sorts of stuff on the html5 canvas. You may have already heard about her , but now she has experienced a new birth. Well, under the cut, I will show you many interesting examples, tell you about the nuances of the work and give a link to the thunderstorm of all the secretaries - almost working solitaire "Solitaire", created using this LibCanvas.



So this library really experienced a rebirth. Or maybe matured? In order not to torment, I will go straight to the point, that is, to examples.
')

Behavior

In addition, what I was talking about in the first part appeared a very significant feature - behavior. They allow you to add some specific functionality to your object. I will give examples of some of them. In fact, they are a little more and one can be tied to another

LibCanvas.Interfaces.Draggable and LibCanvas.Interfaces.Droppable

These interfaces are well known by jQuery. Draggable allows you to move objects. Droppable allows you to throw one object into the second. In the draggable examples, we simply move objects. In the examples droppable we throw a rectangle in a circle and past the circle:
Draggable example
Example droppable

LibCanvas.Behaviors.Linkable

We bind some object to the current so that if we move the current object, it will move and be tied. In the example we move around - the squares move too, but not vice versa.
Linkable example

LibCanvas.Behaviors.Moveable

Move the object to some point smoothly at a given speed or instantly
Moveable example

and various other interfaces like clickable, drawable (basic), bindable (another basic basis), etc. Over time, I will increase. For example, in the near future - resizable [if I figure out how to resize LibCanvas.Shapes.Polygon (or just throw Exception?)]

Something more close to life

Desktop Environment

Let's on the functionality that we simulate the desktop environment. Only 34 lines of code in App.Start.de () and there is a result ! Of course, before KDE4 our environment still grows and grows, but you have to start somewhere? How to call her? Cde? Although busy, sort of. Okay, then I'll figure it out.

Solitaire"

And here is the most interesting. A very playable application with sane FPS and cross-browser compatibility (I said cross- browser , there was nothing about IE!)
Solitaire Klondike in all its glory on html5 + javascript + libcanvas. Enjoy.

License

LibCanvas - lgpl, sources in the repository on Google code or in the archive
Solitaire Klondike - gpl v3 - archived

FAQ

1. Mootools - atstoy, fuck up the whole libcanvas

I really love jQuery. Straight souls are not tea in it. He is beautiful. Amazing. But…
It is completely unsuitable for canvas development. What is, what is not. jQuery == DOM
At first I made my own miniature framework for this library, but then I realized that I was inventing MooTools. I managed to love this framework while working with it (and I recognized it after jQuery), and I will tell you that it is no less beautiful! Of course, jQuery fits much better with DOM, but for such purposes as drawing to canvas without it would be very difficult. Each class, each method in LibCanvas is simply saturated with a mutulus and without it all would not have turned out so beautiful and elegant.

2. Expansion of prototypes (especially arrays) - evil!

Such words are evil, and the expansion of prototypes (especially arrays) is a brilliant idea. Using for (var i in []) will cause problems in ie, not even with extended prototypes, but on the other hand, this makes the code very readable and elegant. And for arrays use ([]). Each ();

3. Well, it's your buggy canvas!

I believe that the canvas (like html5) is now going through a period of formation. A year or two and it will become as natural on the web as flash. Google, Opera, Mozilla, Apple - all improve the canvas at an incredible pace. Yes, even Microsoft promised in the future the brainchild of IE9 to introduce support for this technology. See what happened a year and a half ago (Firefox 3.0, Opera 9.5, Chrome just appeared) and what is now (Firefox 4, Opera 10.6, Chrome 6) in terms of rendering speed. The difference is huge. Almost from scratch to an acceptable level. And after another year and a half, we will see an amazing result.

4. Well, your buggy (LibCanvas | Examples | Solitaire)!

Maybe. They are also in the making, beta version. I accept all the bugs and suggestions in the Google's bag collector . You can do it better.

5. SVG, RaphaelJS, etc

Be original - don't remember it here. If my position is interesting - read the comments to the previous topic and, most importantly, the comments in the first thread of this post.