Thursday, December 13, 2012


One of the great new features in Real Studio 2012 Release 2 is the WebCanvas class for web projects. This class provides an implementation of the HTML 5 Canvas that uses an API that is very similar to the Canvas control used by desktop projects.

When you add a WebCanvas to your web page, you get a Paint event where you can do your drawing using the "g As WebGraphics" parameter. Taking a look at WebGraphics, you can see that it shares many of the same properties and methods of the Graphics class used by desktop projects.

There are Draw and Fill commands for drawing shapes, pictures and strings. You can use the properties to control the size of the drawing pen as well as font and style information.

In addition, there are two additional properties, LineCap and LineJoin, that control how lines are drawn.

So what can you do with a WebCanvas? Pretty much everything you could do using a desktop Canvas control, including drawing: your own custom controls, graphs, pictures, text and more. You can even do animations, however, due to general Internet latency you will find that they cannot update as frequently. They will still work, but depending on the latency between the user's browser and the server running the web application, you may find a noticable delay. However, with careful use of a WebTimer, you may be able to create some animations, such as the CanvasClock example that is included with Real Studio 2012 Release 2.

CanvasClock is a web implementation of the desktop GraphicalClock example. It draws an analog clock on the screen (in a WebCanvas) and then uses a Timer to animate the second hand.

In addition, there are several other new examples included with Real Studio 2012r2 that demonstrate WebCanvas: CanvasBoxes, CanvasChart and WebGridExample.

CanvasChart has been incorporated into our updated example web application, which you can view here:

Click on the "Sales Chart" button on the toolbar to view a chart of invoice amounts created using WebCanvas. You can even click on individual points on the chart to view the actual amount.

Lastly, you can check out the Using WebCanvas video on the Real Software YouTube channel:

Give WebCanvas a try and use it to make great looking web applications with Real Studio!

No comments: