How can I create these kind of images in gwt?

Question

http://yuml.me/diagram/scruffy/class/samples

I know how to draw a rectangle like this:

 context.fillRect(x, y, width, height);

How can those kind of images (not straight border, gradient, shadow) be created with gwt canvas? Is this possible at all? What do I have to look for?

Answer 1

Yes, you can begin with:

// Define the path
ctx.beginPath();
ctx.lineTo(..., ...);
ctx.lineTo(..., ...);
...
ctx.closePath();

// Stroke the path
ctx.setStrokeStyle("#...");
ctx.stroke();

// Fill the path
final CanvasGradient gradient = ctx.createLinearGradient(...);
gradient.addColorStop(0., "#...");
gradient.addColorStop(1., "#...");
ctx.setFillStyle(gradient);
ctx.fill();

The shadow will have to be drawn separately.