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:

Sample

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.

Demo

Click to view Demo

About these ads