Canvas Widget Global Composite Operations

Flow
1

Hi,
this example for html canvas shows that you can add one canvas over the other

I was wondering how I can do that with vaadin. There is a draw image method but it takes url as string.

2

The upcoming version supports setGlobalCompositeOperation. See
this gist
 for an example on this and most other features, too. setGlobalCompositeOperation is used on line 125.

3

Thanks for the add-on and quick reply

I’m trying to draw a image using “destination-atop” composite operation.


canvas.setGlobalCompositeOperation("destination-atop");
ExternalResource water = new ExternalResource(
                "imageURL");
canvas.drawImage(water.getURL(), 0, 0);

But it’s not working. It just draws the image over the canvas. So does this mean that this won’t work currently? I’m using vaadin 6.8 and the latest version of the add-on

4

To use global composite operation modes with the add-on you first draw one or more shapes to the canvas (these are the destination shapes), then call setGlobalCompositeOperation, and then draw the source shape(s).

I updated the gist with a better demo for all available composition modes, see the method drawCompositions for an example.