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.


nice sample. it will help me a lot. Thank you!. . .
Pingback: GWT and HTML5 Canvas Demo | All of Java