8

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 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)

ChRapO
  • 327
  • 5
  • 14

4 Answers4

8

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.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • Yep, SVG is what would be the easiest way to go. As far as I know, there are no canvas libraries that support the kind of event detection as you want. – Jani Hartikainen Oct 10 '10 at 11:54
6

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

Eric Rowell
  • 5,191
  • 23
  • 22
1

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.

Community
  • 1
  • 1
Castrohenge
  • 8,525
  • 5
  • 39
  • 66
  • Thx, I have already tried Fabric.js. It's amazing, but the guys don't solve animation and events problem (at least not as a common functionality). – ChRapO Oct 12 '10 at 21:12
  • 2
    No, there is a problem that the project is death. But current functionality is good. – ChRapO Oct 13 '10 at 18:27
0

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.

ZonerTone
  • 31
  • 1