Draw with gwt graphics

Hi,

I am a student, we are working on a Vaadin project and I need to draw freehand graphics with gwt but I do not really know how that works.
I try to do this but I’m not sure this is the right method.

My UI

[code]
public class MyUI extends UI {

private MyCanvas myCanvas;

@Override
protected void init(VaadinRequest vaadinRequest) {
   myCanvas = new MyCanvas(400,400);
   setContent(myCanvas); 
}

@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
public static class MyUIServlet extends VaadinServlet {
}

}
[/code]My component

[code]
public class MyCanvas extends AbstractComponent{

public MyCanvas(int width, int height) {
    getState().texte = "Change texte from Server";
}

@Override
public MyCanvasState getState() {
    return (EditorCanvasState) super.getState();
}

}
[/code]State

public class MyCanvasState extends AbstractComponentState{ public String texte = "original texte"; } My connector

[code]
@Connect(MyCanvas.class)
public class MyCanvasConnector extends AbstractComponentConnector{

//MyCanvasRpc rpc = RpcProxy.create(MyCanvasRpc.class, this);

public MyCanvasConnector(){
    getWidget().addTexte(getState().texte);
    getWidget().addCircle(200, 200, 30);
    getWidget().addClickHandler(new ClickHandler() {          

        @Override
        public void onClick(ClickEvent event) {
            // TODO Auto-generated method stub
            getWidget().addLine(0, 0, 400, 400);
        }
    });
}

@Override
protected Widget createWidget(){
    return GWT.create(MyCanvasWidget.class);
}

@Override
public MyCanvasWidget getWidget(){
    return (MyCanvasWidget) super.getWidget();
}

@Override
public MyCanvasState getState() {
    return (MyCanvasState) super.getState();
}

@Override
public void onStateChanged(StateChangeEvent stateChangeEvent) {
    super.onStateChanged(stateChangeEvent);
    String t = getState().texte;
    getWidget().addTexte(t);
}

}
[/code]My widget

[code]
public class MyCanvasWidget extends DrawingArea{

public static final String CLASSNAME = "mycanvaswidget";

public MyCanvasWidget() {
    super(400, 400);
    setStyleName(CLASSNAME);
}

public void addCircle(int x, int y, int ray){
    this.add(new Circle(x, y, ray));
}

public void addTexte(String t){
    Text chaine = new Text(50, 50, t);
    this.add(chaine);      
}

public void addLine(int x, int y, int xx, int yy){
    this.add(new Line(x,y,xx,yy));
}

}
[/code]Do you have suggestions to improve my implementation?
Sorry, my English is not great.

I used a Composite with a VerticalPanel and put a Canvas in it. This is working fine for me.

public class MyCanvasWidget extends Composite implements MouseDownHandler
{
    public static final String CLASSNAME = "MyCanvasWidget";

    private Canvas canvas;
    private Context2d context;
    private VerticalPanel panel = new VerticalPanel();

    public MyCanvasWidget() {
        super();

        canvas = Canvas.createIfSupported();
        context = canvas.getContext2d();
        panel.add(canvas);
        
        initWidget(panel);
        setStyleName(CLASSNAME);

        canvas.setCoordinateSpaceWidth(600);
        canvas.setCoordinateSpaceHeight(600);
        
        canvas.addMouseDownHandler(this);
    }

    @Override
    public void onMouseDown(MouseDownEvent event)
    {
        context.setFillStyle(CssColor.make(255, 0, 0));
        context.beginPath();
        context.arc(event.getX(), event.getY(), 20, 0, 2*Math.PI);
        context.fill();
    }
}