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

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



So, this library really experienced a rebirth. Or maybe grown up? In order not to languish, I will immediately get down to business, that is, to examples.

Behaviors

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

LibCanvas.Interfaces.Draggable and LibCanvas.Interfaces.Droppable

Many people know these interfaces by jQuery. Draggable allows you to move objects. Droppable allows you to throw one object into a second. In the draggable examples, we simply move the objects. In the droppable examples, drop the rectangle into the circle and past the circle:
draggable
example droppable example

LibCanvas.Behaviors.Linkable

We attach some object to the current one so that if we move the current object, the attached one will also move. In the example, we move around - the squares move, but not vice versa.
Linkable example

LibCanvas.Behaviors.Moveable

We move the object to some point smoothly at a given speed or instantly. The
example is moveable

and various other interfaces, such as clickable, drawable (the basis of the foundations), bindable (another basis of the foundations), etc. Over time, I will increase. For example, in the near future - resizable [if I come up with how to resize LibCanvas.Shapes.Polygon (or just throw an Exception?)]

Something closer to life

Desktop environment

Let's use 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? What would you call her? Cde? Although busy, sort of. Okay, then I'll figure it out.

Solitaire"

And here is the fun part. A very playable application with sane fps and cross-browser compatibility (I said cross browser , there was nothing about IE!)
Solitaire “Kosyna” in all its glory on html5 + javascript + libcanvas. Enjoy it.

License

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

FAQ

1. Mootools - atstoy, fucked up the whole libcanvas

I really love jQuery. Straight soul do not tea in it. He is beautiful. Amazing. But ...
It is absolutely not suitable for development on canvas. What is, what is not. jQuery == DOM
At first I made my miniature framework for this library, but then I realized that I was inventing MooTools. I managed to fall in love with 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 is much better for working with the DOM, but for such purposes as drawing into canvas without it, it would be very difficult. Each class, each method in LibCanvas is simply saturated with mutulus, and without it all of this would not have turned out so beautifully and gracefully

2. Extension of prototypes (especially arrays) is evil!

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

3. Well, your buggy canvas!

I believe that canvas (like html5) is currently in its infancy. A year or two and it will become as natural on the web as flash. Google, Opera, Mozilla, Apple - all improve canvas at an incredible pace. Yes, even Microsoft promised in the future the offspring of IE9 to introduce support for this technology. Look at 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 in another year and a half we will see an amazing result.

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

Maybe. They are also in their infancy, beta. I accept all bugs and suggestions in the bag compilation on Google code . You can do it better.

5. SVG, RaphaelJS, etc

Be original - do not remember it here. If my position is interesting - read the comments on the previous topic and, most importantly, the comments in the first thread of this post.