Canvas drawImage() problem.

Flow
1

Hi there!

I have a strange problem with drawing images on Canvas.
When I trying to load image on canvas through, e.g.

Canvas canvas = new Canvas();
canvas.setWidth("400px");
canvas.setHeight("400px");
canvas.clear();
canvas.drawImage("http://www.google.ru/intl/en_com/images/srpr/logo1w.png",50,50);

I see an empty canvas! But if I refresh the page, all is OK. I’ve attempted several different ways to do this , even try to switch the GWTCanvas on gwt-g2d (another Canvas implementation for GWT), it isn’t help. requestRepaintAll() isn’t help too.
Is it possible to force refresh a page somehow? Any ideas?

Thank you.

Greg.

2

Hi,

I’m sorry, but I’m not quite following - there is no Canvas in Vaadin, so I’m going to guess that you’re using some add-on, probably CanvasWidget…?

  1. Did you notice version 1.0.2 fixes some bug with drawImage() (not sure which bug, though, but worth checking out…)

  2. Are you using threads? The browser can’t magically know stuff has changed on the server if the changes occur outside the request, in such cases you need to use poll or push.

Best Regards,
Marc

3

Hi, Marc!

Thank you for your advises!
Yes, this is the CanvasWidget, of course.
I use 1.0.2 version, and I don’t use threads.
Just a simple CanvasWidget example:

I’ve checked it with Chrome 6 and Firefox 3.6 - the image shown only after several refreshes.
Seems an image is cached by browser, and only after that it shows correctly.

4

Apparently you are right, the client-side drawImage method will not draw the image unless it has already been cached. To correct this I added image prefetching to those calls, which should fix the problem. Version 1.0.3 is now
available in the Directory
.

5

Hi all,

I’ve problem with this addon.

I’m using addons CanvasWidget 1.0.3 and I load image from theme like that:


@Override
public void init() {
  Window mainWindow = new Window("Canvastest Application");
  Canvas canvas = new Canvas();
  canvas.setWidth("400px");
  canvas.setHeight("450px");
  canvas.saveContext();
  canvas.drawImage("http://localhost:8080/CanvasTests1/VAADIN/themes/mytheme/imgs/template.png", 0, 0);
  canvas.restoreContext()
  mainWindow.addComponent(canvas);
  setMainWindow(mainWindow);
}

And I see that image is displayed only after second reload page. I tried use for external image like that:

canvas.drawImage(“http://vaadin.com/vaadin-theme/images/demo/icons/reindeer.png”, 0, 0);

and problem is still.

I tried use duplicate 3 lines again, but it doesn’t help.

Is there actually other solution for it?

Is this possible to load image from like that ThemeResource into this Canvas? I need image loaded on canvas because I’m doing some operations on this (drawing lines, transparent rectangle).

Best regards,
Paul

6

Hi ,

       I've faced the same problem with chrome. overcame this by adding following in the client widget code.

      private void handleDrawImage2(UIDL uidl) {
	
                                     [b]

.
.
.
[/b]

                                      //Image loading bug fix for chrome
	if(canvas.getElement().getNodeName().equalsIgnoreCase("canvas")) {
		
                                                            image.addLoadHandler(new LoadHandler() {   
			public void onLoad(LoadEvent event) {    
				Image loaded = (Image) event.getSource();
				canvas.drawImage(ImageElement.as(loaded.getElement()), offsetX, offsetY, height, width);
			}
		});
		image.setVisible(false);
		RootPanel.get().add(image);
	}else{
		canvas.drawImage(ImageElement.as(image.getElement()), offsetX, offsetY, height, width);
	}
  }

Regards,
Rajan

7

Hi,

I tried your solution, but still doesn’t work :(. Maybe I did mistake? I downloaded source for CanvasWidget next in VCanvas.java did changes:

	private void handleDrawImage2(UIDL uidl) {
		String url = uidl.getStringAttribute("url");
		final double offsetX = uidl.getDoubleAttribute("offsetX");
		final double offsetY = uidl.getDoubleAttribute("offsetY");
		final double height = uidl.getDoubleAttribute("height");
		final double width = uidl.getDoubleAttribute("width");

		// Canvas.drawImage won't show the image unless it's already loaded
		Image.prefetch(url);

		Image image = new Image(url);

		if (canvas.getElement().getNodeName().equalsIgnoreCase("canvas")) {
			image.addLoadHandler(new LoadHandler() {

				public void onLoad(LoadEvent event) {
					Image loaded = (Image) event.getSource();
					canvas.drawImage(ImageElement.as(loaded.getElement()), offsetX, offsetY, height, width);
				}
				
			});
			image.setVisible(false);
			RootPanel.get().add(image);
		} else {
			canvas.drawImage(ImageElement.as(image.getElement()), offsetX, offsetY,
					height, width);
		}
	}

Next recompilation, put generated jar (Export as Vaadin Add-on Package) in simple project. Still is missing image. Can you give me advice?

Main application code is simple:

	@Override
	public void init() {
		Window mainWindow = new Window("Canvastest Application");
		setTheme("deafinfo");
		Canvas canvas = new Canvas();
		canvas.setWidth("400px");
		canvas.setHeight("450px");
		canvas.saveContext();
		canvas.drawImage("http://localhost:8080/CanvasTests/VAADIN/themes/mytheme/imgs/template.png", 0, 0);
		canvas.restoreContext();
		canvas.requestRepaintRequests();
		mainWindow.addComponent(canvas);
		setMainWindow(mainWindow);
	}

Best regards,
Paul Silesian