Best way to have client-side interactive graphics?

I was hoping someone could point me in the right direction on what to search for to solve this problem:

I want to have a box, say 400x400, where I will display a graphic of a car. In that graphic there will be dotted outlines of components (engine, tires, etc.). Based on user interaction elsewhere on the page an engine will appear in the top right corner. The user can then click and drag the engine into it’s outlined area, where it will “snap” to its position. And so on, until the car is finished. Then it will drive away (or whatever, the details aren’t important, just the interaction with the mouse and the graphics).

Should I make:

  • A custom GWT widget?
  • a custom GWT widget based on an HTML5 canvas?
  • an HTML5 canvas and handle all the “mouse down” “mouse drag” “mouse up” events server side? (That might be too laggy, wouldn’t it?)
  • something else I don’t know about yet?

I’m just not sure how to approach this. If it was pure javascript I could look at many examples online of graphics and interactions with the mouse, especially now with HTML5. But with Vaadin I just need a pointer in the right direction on the best way to approach this.

Many thanks!


For example, I’ve found
which both offer javascript engines to help do exactly what I need to do. Perhaps all I need to do is make a custom component that has one of these javascript libraries embedded? Is this even possible? (The Vaadin book doesn’t really go into detail about how to embed an entire javascript library, or at least I haven’t found where it does.) Again, thanks for any help.