HTML5 canvas advanced framework

I need HTML5 canvas framework to do:

• draw object (e.g. rectangle)
• on onmouseover event of the object change color/border style
• on click do some开发者_如何学Python js action

thx

EDIT: I have finally decided to use raphaeljs (alternative would be dojo). This framework is awesome. (It doesn't need HTML5 canvas and uses SVG)

It sounds like what you really want is a retained mode graphics interface, where you can create an object, get mouse events on it, change properties on it, move it etc and have the browser cope with redrawing the screen as necessary. In this case you would be better off with SVG instead of <canvas>, which as an immediate mode graphics surface really is just a box full of pixels.

Don't forget about KineticJS, which performs much better than the ones you've mentioned, plus it has a much simpler API

Take a look at this question:

What is the current state of the art in HTML canvas JavaScript libraries and frameworks?

Fabric.js is mightly impressive and CAKE is also a decent library.

bHive does this really nicely and coming from an Actionscript background I found it quite easy to use, I had to look at the demos as the documentation isnt helpful!

To help you..

square = engine.createShape({
    shape: 'square',
    style: 'filled',
    backgroundColor: '#000',
    width: 120,
    height: 20,
    x: 20,
    y: 100
});

To do any mouse actions you need to add it to a clip object.

clip = engine.createClip({ x: 20, y: 20 });

Then

clip.add(square);

add an event listener

clip.addEventListener('onmouseover',function(e) { some code ... });
clip.addEventListener('onclick',function(e) { some code ... });

In the loop you need to then draw the square.

clip.draw();

I'm using the source of the demos to help me through so maybe check out http://www.bhivecanvas.com/demos/cargame.php as that has rollovers and onclicks in it.