jCanvaScript: JavaScript library for working with html5 canvas

All good!

jCanvaScript is, as can be seen from the “attention-grabbing picture”, JavaScript-framework. It is not difficult, I think, to guess from the title of the topic that the purpose of the library is to work with the HTML5 canvas element. Under the cut everyone who is interested is waiting for a short story about the library and how it was created.



I read somewhere on the web somewhere, maybe even here, on Habré, once again about the canvas - and sat down to draw. It turned out to be simple, but not very convenient. Well, okay - there was the first thought, these are trifles, I will try to create something animated. Creating an animation also turned out to be easy - provided, of course, that the animation itself is simple and does not need to be managed. In general, the farther into the forest - the more firewood. It was necessary to change something.

First there were wrappers for drawing primitives, then a prototype of the library was formed (with a factory of objects inside), functions were gradually added to it — for a start, just access to the canvas API. Then I wanted to work with events ... Time passed, the library grew.



So, what do we have today?



A small, about 36kb (size of version 1.0) compressed form, a library that provides a convenient interface for interacting with canvas. I will not describe the interfaces in the framework of this article, as it is enough said about them, besides with a bunch of examples, on the official website of the project. But I will mention that the library is self-sufficient, that is, it does not require the connection of any additional libraries and is not an extension of any of them - yes, this is not surprising, so it should, perhaps, be, but nonetheless. Sometime lately, plug-ins are more popular than writing.

I will also mention the fact that:

• Of course, you can hang mouse, keyboard, and focus events on objects.
  
  ')
  
  For example:
  
  
  
  

  jc.circle(x,y,radius) .click(function(){ //-  }); 

  
  
  
• Of course, drag'n'drop is already implemented. I will not give the code, let me just say that draggable and droppable functions are used, something like in jQuery.
  
  
  
  
• Naturally, (javascript, after all) you can use chains of methods.
  
  
  
  Like this:
  
  
  
  

   jc.circle(x,y,radius) .up('top')//        .id('myCircle')//  id .name('myCircles'); //     

  
  
  
  
  
• Yes, elements can be assigned identifiers (id) and names (name), in order to then refer to them individually (in the first case) or as a group (in the second case).
  
  
  
  For example, refer to the circle from the last example as follows:
  
  
  
  

   jc('#myCircle').color('rgba(255,255,0,0.5)');//   id     jc('.myCircles').color('rgba(255,255,0,0.5)');//    name     

The library is constantly being added, refactored and so on. This means that there is still something to change in the code, on the one hand, and that there will be added a lot more, on the other. Suggestions and ideas are welcome - write to support@jcscript.com. Bug reports - to the same place, I wait for them with even greater impatience.



Yes, finally some more code is also very simple. How do we draw a red circle on the canvas and make it move to a certain point in a while, gradually changing its color to green? That's how:

 jc.circle(x,y,radius,'#ff0000',1) .animate({x:x1,y:y1,color:'#00ff00'},time); 

Of course, all this will work only in the presence of jCanvaScript, and in Internet Explorer - you will also need exCanvas.



PS Honestly, I was going to wait a little more with the announcement - the site was not fully tested for literacy, but at the last conference # html5camp the question of a framework for working with canvas was raised several times, which made it hurry. By the way, there were posts in twitter about jCanvaScript, but no response was received. And I want feedback.)



UPD : GitHub , twitter