GWT Canvas widget - drawing in a browser

Story

I believe many of you felt that some thing are hard to acquire with pure DOM objects and maniputllation. DOM puts you into hard fram. If you ever tried make something round-cornered, you know that count of the libraries doing this exceeds any reasonable task.

Methods used there are different: some use colored graphic corners, but don't allow you for selecting any color you want. Some of them need JavaScript runing on a page. Some need some weird markup, and tricks with the HyperText controls for IE. Some simply don't work well.

So, why not just to draw?

So, (how) can I draw in browser?
HTML 5 Canvas elements allows some drawings. But, making a web-application today, I'd not use this as a production decision. Simply because some old bad browsers don't know it.

And we don't want to make people feel lost because they are using IE6, do we? There's a solution, though. It's name is VML. It's Micro$oft answer to the SVG. (by the way, SVG is not that a good standard itself, too). Internet E$plorer does support VML, but the API is quite different from Canvas.

If we take 2 coverage areas - one of browsers already covered with Canvas tag (FireFox, all webkits, Opera) and VML (IE's) - we'll have plenty solid browser coverage.

The problems yet to be resolved is a cost of development. In order to get something working, you'll have spent more than twice more time than for single Canvas or for VML only.

So, (how) can I draw in browser? (GWT way)

When someone says about masking differences between the browsers, I always think of GWT. That's the best thing I love in it.

And, I used to search for vector graphics library for Google Web Toolkit.

I found one (just as a proof-of-concept) in the GWT-Widgets library. (There's also an interactive demo for the Canvas widget - you can draw different shapes over image just in a webpage without any flash, java or any other hard stuff).

Actually, I liked it.
Also, after incorporating the GWT-Widgets Canvas to a project, I found another one. This is demo for newer Canvas wrapper, and this is gwt-canvas project home page

The least I wanted to show you is the sample of Canvas working in the real world. The following is a way to see it (it's in Cyrillic, so I'll do verbose notes :) )

1. The site is about calculation of the metal-plastic windows cost basing on different selections from user.
   
2. Open up http://osnova.ks.ua
   It loads slowly, but wait until all the stuff is loaded.
3. In the top navigation menu, select 'Посчитай!' item. This means 'Calculate' in english. It is the fourth item from the left, and it has vivid red background.
   
4. You'll see a 'Выберите тип конструкции...' blue link underlined in the center of screen. Click on it.
   
5. You'll see basic shape selector. The shapes themselves are drawn with canvas.
   
6. Select one - and you'll get it big. Big shape with all sizes is also drawn with the help of canvas widget.

That's all for this site.

What I found good and bad in drawing on the webpage with GWT and Canvas

Pros:

• It works
• It works in different browsers
• It works fast enought
• Instrument palette is enough for many basic features

Cons:

• As it is PoC, there are some issues. I've seen that sometimes wide lines disappeared in IE, leaving wireframe only.
  
• You can NOT draw text. The text you see there - it is just images with letters. Actually, there's a solution for this - but it's weird. There's a pair of client and serverside script. Client sends request to the server with the phraze it wants to get. Serverside has the text with all the alphabet as an image, and then glues the phraze, thus creating image with the desired text, and then passes that by to client.
  That's too heavy for such a simple task
• It can be done more easily with Flash, but this is a double-sided penny. You'll need your users to have Flash installed. From the statistics of people coming to this blog, 3 of 80 don't have flash installed. That's too bad for big amount of people. :)
  

Hope this stuff will be useful for you!