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

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 {
    }
}

My component

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();
    }
}

State

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

My connector

@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);
    }
}

My widget

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));
    }
}

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();
    }
}