Drawing in Canvas with GWT

Question

I have two images that i want to draw into a canvas object. I got those images from a server and when the loadHandler invokes, i get the dimensions of the image (they have the same width and height) and calculate the dimensions of the canvas. Then i draw each image, at the calculated x,y position in canvas. The problem is that only one image appears in canvas. Why?

Here is a part of the code:

final Image siImg = new Image();
            siImg.setVisible(false);
            siImg.setUrl(Constants.URL_PREFIX + siPath);
            siImg.addLoadHandler(new LoadHandler() {

                @Override
                public void onLoad(LoadEvent event) {

                    int siWidth = siImg.getWidth();
                    int siHeight = siImg.getHeight();

                    siImg.removeFromParent();

                    if (!CategoryTableView.this.dimFromBg) {
                        CategoryTableView.this.width = siWidth;
                        CategoryTableView.this.height = siHeight * sSize;
                        //CategoryTableView.this.setPixelSize(CategoryTableView.this.width, CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setPixelSize(CategoryTableView.this.width, CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setCoordinateSpaceHeight(CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setCoordinateSpaceWidth(CategoryTableView.this.width);
                        CategoryTableView.this.dimFromBg = true;
                    }

                    ImageElement imageElement = (ImageElement) siImg.getElement().cast();

                    int left = xOff;
                    int top = yOff + (siHeight * fi);


                    CategoryTableView.this.context.drawImage(imageElement, left, top);

                }

            });
            RootPanel.get().add(siImg);

Ok i think i find it...i have to save the context's state each time. Is that right? (Because it works now!)

Answer 1

You add the image to your root panel in the last line

final Image siImg = new Image();
...
RootPanel.get().add(siImg);

instead of adding your canvas. So you will only see the image instead of the canvas. You have to add the Canvas to your root panel and draw both images to your canvas. For performance-reasons it is better to draw to a backbuffer instead of drawing directly to the canvas. Here is a little example:

Canvas canvas = Canvas.createIfSupported();
Canvas backBuffer = Canvas.createIfSupported();

Context2d context = canvas.getContext2d();
Context2d backBufferContext = backBuffer.getContext2d();

Image image1 = new Image("http://your.url.to/image.jpg");
image1.addLoadHandler(new LoadHandler() {       
    public void onLoad(LoadEvent event) {
        // do anything you want here
        doDraw();
    }
});

Image image2 = new Image("http://your.url.to/image2.jpg");
image2.addLoadHandler(new LoadHandler() {       
    public void onLoad(LoadEvent event) {
        // do anything you want here
        doDraw();
    }
});

RootPanel.get().add(canvas);

And the draw-method would look like this:

public void doDraw() {
    backBufferContext.setFillStyle(redrawColor);
    backBufferContext.fillRect(0, 0, width, height);
    ImageElement imageElement = ImageElement.as(image1.getElement());
    backBufferContext.drawImage(imageElement, 0, 0, 1024, 768, 0, 0, 102, 76);

    ImageElement imageElement = ImageElement.as(image2.getElement());
    backBufferContext.drawImage(imageElement, 0, 0, 1024, 768, 102, 76, 102, 76);

    context.drawImage(backBufferContext.getCanvas(), 0, 0);
}

Please note: You have to use global variables in this example. Change this to your needs by either passing the arguments/classes or defining the variables class-wide. Also the drawing-areas are hardcoded in this example: this you have also to change to your needs.