html rendering and speed issues - playn

Question

I'm in the early stages of development on a game. I'm using images to create animations by drawing a piece of a larger image onto a surface. Here's a code example:
void drawNextFrame() {
//surf.canvas().clear();
surf.clear();
float startX = entity.flipH ? entity.width : 0;
float endX = entity.flipH ? -entity.width : entity.width;
float width = entity.width;
float height = entity.height;
//surf.canvas().drawImage(image, 0, 0,
surf.drawImage(image, 0, 0,
width, height,
(width * curFrame) + startX, 0,
endX, height);
}
surf is the surface of the SurfaceLayer and image is an Image asset. The Java version of this game works wonderfully, it's smooth and responsive and doesn't drop any frames or have any rendering issues. I'm having trouble with the HTML version though, it seems sluggish and drops a lot of frames in the animation. For example I have a run animation for the player that loops, it seems like the HTML version only plays the animation once before the player becomes blank. Jumping or triggering some other animation fixes it so I can play the run animation again, but it still won't play past one iteration of the animation loop before turning the character blank. I also have trouble with surf.clear() firing consistently and sometimes the frames stack on top of each other.
I've done all kinds of debugging to make sure I'm not drawing frames too fast. I'm not touching the paint() method. I tried switching out SurfaceLayer for CanvasLayer, and while that seemed to change the behavior a bit regarding what types of rendering issues I was having and when they were happening, it was still a very unplayable experience. Additionally it was failing to creating mirror images of my images when, for example, the player is facing backwards. I included the commented out code for the Canvas version above--in this case surf is an instance of CanvasImage. I am using Box2D in addition to drawing these animations if that makes a difference.
My question is: is this normal? Am I the only one having these types of issues, and has anybody found a workaround? I just want to make sure I'm not doing something wrong and the approaches I'm taking are valid.
I'm testing with Chrome on a fairly modern machine with the 1.2 branch of PlayN. I build and test the HTML version of my project from the command line via Maven with the following commands:
mvn clean
mvn install
mvn test -Ptest-html
And then I browse to http://localhost:8080 with Chrome.
An additional issue I'm running in to is that refreshing the page doesn't always reload my game. I've implemented an AssetWatcher to make sure everything is available before starting and it works once, generally after I clear my browser cache and restart Chrome, however after that I'm lucky if a refresh loads the game up. Usually I have to repeat the process of clear cache, restart browser to test it again.
I know I'm asking a lot of questions without providing a whole lot of code but I have everything in an SVN repository online and would be happy to open it up to anybody willing to take a look.
Any help is appreciated! Thank you for your time!

Answer 1

Have you looked at the PlayN samples? CuteGame, in particular, seems like it might be relevant. See:
Game Class Immediate Layer Renderer
Cute World paint Method (invoked by renderer in game class)
Cute World paintObjects method (invoked by paint)