|
The HTML Canvas tag is a great way to draw two-dimensional graphics in a web browser. It can do a lot more than Ortho, including direct support for curves, diagonal lines, polygons, clipping paths, gradient fills and much more. It many ways it is superior to Ortho, with one BIG exception - Canvas has NO support for text whatsoever.
Canvas was originally created by Apple for their Dashboard widgets and has since been supported on Safari and Firefox browsers. It is not directly supported in Internet Explorer but thanks to the remarkable ExplorerCanvas project (excanvas) you can emulate a Canvas in IE. The Mozilla Developer Center has a nice Tutorial on Canvas
Here is an example of simple graphical elements created using Canvas, followed by the equivalent elements created using Ortho. Both can display the four elements on the left with little or no difference. Canvas can display a much wider range of elements than Ortho and the arc and square with a color gradient show two of these that have no Ortho equivalent. On the other hand Ortho can mix text in with graphics, whereas Canvas cannot.
On screen the common elements between the two should be very similar. But go and print this page (or print preview it) and you will probably see significant differences in the scaling of the canvas panel. This can be a serious problem if your users want to print out your graphics.
CANVAS
ORTHO
Canvas + Text Overlay
One way to get over the lack of text support in Canvas is to overlay text created in the DOM over the canvas panels. This is a messy but feasible approach for some applications but it also suffers from the inability to produce accurate printed output in the common web browsers.
The following two panels should appear almost identical when viewed on screen (They are supposed to be pushed to the left side of the page). But when printed the text overlaid on the Canvas may not have the correct alignment.
CANVASMac OS X Safari does a good job in printing both panels correctly
but Mozilla Firefox 2.0 on Mac OS X produces this output
(This is an image)
Internet Explorer 7 on Windows XP produces this when printed
(This is an image)
Clearly neither of these is acceptable if your users need to print out your pages. Ortho, on the other hand, retains the correct layout of text and graphics in both of these examples.
Ortho doesn't aim to be a perfect graphics solution for everyone but
for a wide range of applications it may be just what you need. Here is a
table of Pros and Cons to help you decide if it is right for you.
| Canvas | Canvas + Overlay | Ortho | |
|---|---|---|---|
| Pros | |||
| Sophisticated 2D Graphics | Adds Text to Canvas | Text fully integrated with Graphics | |
| Support will improve in the future browsers | Print and Screen Graphics are the same | ||
| User Interaction (forthcoming) | |||
| Integrated with Prototype and Scriptaculous libraries | |||
| Cons | |||
| No Support for Text | Clumsy programming model | Limited Graphic primitives | |
| No Native IE Support | Severe Printing Problems | Non-standard 2-D graphics programming model | |
| No direct support for User Interaction |
 |
Ortho © 2007 Robert Jones | Freely Distributable (MIT License) |
 |
Craic Computing LLC Seattle, WA, USA |