Canvas in GWT

Canvas is one of the coolest features of HTML 5. It was introduced in GWT in its 2.2 release. Canvas can have various usages such as drawing, image manipulation, animations… For example, we have used it in a street design tool to draw a map scale. Being to able to use Canvas methods from Java code is a treat. In this tutorial, we will give some examples of how to use Canvas in GWT.

1. Drawing:

        
canvas = Canvas.createIfSupported();
   if (canvas == null) { 
     RootPanel.get().add(new Label("Sorry, your browser doesn't support the HTML5 Canvas element"));
     return;
     }
	        
	canvas.getElement().setAttribute("width", "39");
	canvas.getElement().setAttribute("height", "114");
	        
        this.isFirstElement = isFirstElement;
	this.isLastElement = isLastElement;
	Context2d ctx = canvas.getContext2d();
		
        if(isFirstElement){
        ctx.moveTo(0,0);
		ctx.lineTo(0,114);
        }
        if(isLastElement){
        ctx.moveTo(39,0);
		ctx.lineTo(39,114);
        }

	ctx.moveTo(0,74);
	ctx.lineTo(39,74);
	ctx.moveTo(0,21);
	ctx.lineTo(39, 21);
	ctx.moveTo(39, 0);
	ctx.lineTo(39, 68);
	ctx.moveTo(0, 21);
	ctx.lineTo(5, 16);
	ctx.moveTo(39, 21);
	ctx.lineTo(34, 26);
	ctx.setFillStyle("#CC9999");
	ctx.fillRect(0, 29, 100, 40);
	ctx.setFillStyle("#00ff40");
	ctx.fillRect(11, 42, 17, 15);
	ctx.stroke();

Result:


2.Text and background manipulation:

        
 Canvas canvas;
         Context2d context;
    
    	 canvas = Canvas.createIfSupported();
         if (canvas == null) {
               RootPanel.get().add(new Label("Sorry, your browser doesn't support the HTML5 Canvas element"));
               return;
         }
             
         canvas.getElement().setAttribute("height", "300");
         canvas.getElement().setAttribute("width", "300");
         
         Context2d ctx = canvas.getContext2d();
         
         CanvasGradient grd = ctx.createRadialGradient(75,50,5,90,60,100);
         grd.addColorStop(0,"#e54825");
         grd.addColorStop(1,"white");
         

         ctx.setFillStyle(grd);
         ctx.fillRect(10,10,150,80);
         
         ctx.setFont("30px Arial");
         ctx.strokeText("G-Widgets",10,50);

Result:


3. Image manipulation and animation:

    
Canvas canvas;
    Context2d context;
    final Position currentPosition = new Position(0, -30);
    
       canvas = Canvas.createIfSupported();
        if (canvas == null) {
              RootPanel.get().add(new Label("Sorry, your browser doesn't support the HTML5 Canvas element"));
              return;
        }
        canvas.getElement().setAttribute("height", "500");
        canvas.getElement().setAttribute("width", "500");
        
        canvas.setHeight(500 + "px");      

        canvas.getElement().getStyle().setBackgroundImage("url('glassorb1.png')");
        
        final Timer timer = new Timer() {           
            @Override
            public void run() {
            	draw();
            }
        };
       timer.scheduleRepeating(2000);
    }
    
    public void draw(){
    	
        context = canvas.getContext2d();
        
        Image image = new Image("logo.png");
        ImageElement imageElement = ImageElement.as(image.getElement());
        
       // context.drawImage(imageElement, 0, 0, 200, 200);
       context.clearRect(0, 0, 500, 500);
        context.drawImage(imageElement, currentPosition.getX(), currentPosition.getY());
        
        Position nextPosition = getNextPosition(currentPosition); 
        
        if(nextPosition != null){
        	
        	currentPosition.setX(nextPosition.getX());
        	currentPosition.setY(nextPosition.getY());
        	
        }
    }

// other methods

Result: (image moving inside Canvas: http://www.g-widgets.com/samples/ => Canvas)

Archive

Subscribe

Atom