This is my first experiment with GWT and HTML5 Canvas. My first attempt is to create rectangles, with just a few lines of code I came up something like this:

Code:

 

public class GwtHtml5 implements EntryPoint {
 
 static final String canvasHolderId = "canvasholder";
 static final String unsupportedBrowser = "Your browser does not support the HTML5 Canvas";
 static final int height = 400;
 static final int width = 500;
 final CssColor colorRed = CssColor.make("red");
 final CssColor colorGreen = CssColor.make("green");
 final CssColor colorBlue = CssColor.make("blue");
 Canvas canvas;
 Context2d context;
 
 
 public void onModuleLoad() {
 canvas = Canvas.createIfSupported();
 if (canvas == null) {
 RootPanel.get(canvasHolderId).add(new Label(unsupportedBrowser));
 return;
 }
 createCanvas();
 }
 
 private void createCanvas(){
 
 canvas.setWidth(width + "px");
 canvas.setHeight(height + "px");
 canvas.setCoordinateSpaceWidth(width);
 canvas.setCoordinateSpaceHeight(height);
 
 RootPanel.get(canvasHolderId).add(canvas);
 
 context = canvas.getContext2d();
 
 context.beginPath();
 context.setFillStyle(colorRed);
 context.fillRect(100, 50, 100, 100);
 context.setFillStyle(colorGreen);
 context.fillRect(200, 150, 100, 100);
 context.setFillStyle(colorBlue);
 context.fillRect(300, 250, 100, 100);
 context.closePath();
 
 }
 
}

And my Spring balls experiment with some codes that I found on the Web.

Reference: GWT and HTML5 Canvas Demo from our JCG partner Mark Anro Silva at the GlyphSoft blog.