game performance of html5 canvas and pure Javascript/GWT

Question

I want to write an animated game which needs a lot of animations running all the time, something like rolling the cards/images in slot machine. I am wondering if I should mainly use just pure GWT/Javascript to run the animation, or use HTML5 Canvas or HTML5 animation to achieve this. I know I might be able to make more fancy animated motion or graphics if I use HTML5 canvas, but I also cares about the performance more because there are several "animations" running in the same time just like rolling so many images in 5 columns slot machine. In this case, I think performance is most important.

I heard that drawing things in Canvas is really expensive. So I am not sure if I keep rolling images in Canvas is expensive as well.

1. What do you think which technique I should use to write a game like slot machine? HTML5-Canvas, pure JS/GWT-animation, or HTML5-animation?

2. I need to use some audio for the games, but I am pretty new to this, I do not know what libraries or technique I can use for audio. Please give me some advice.

Thanks.

Answer 1

if you have a lot of graphical animations, Canvas 2D will be a good choice. If you are dealing with vector shapes, simple animations SVG might be an option. I would not go for GWT as the abstraction layer of Java might hinder your ability to use full power of HTML/CSS/JS.

Ensure you use a basic game library if you choose plain JS and Canvas. I used jawsjs which is ok for simple games. See and observe the performance of below game which is based on Canvas 2D if you need a reference. Let me know if you need the code of it as a reference.

http://99challenge.com/_index.html

On audio, there are few challenges. Firefox behaves different to all other browsers, and has quite instable audio support. You might need to look for Flash support in getting audio to work properly on FF.