Creating pretty graphics – or any meaningful graphics at all – in web applications is an important issue. Visual information as well as illustration makes applications more appealing and often more usable and productive as well. Browsers render HTML and can fetch graphics by interpreting the IMG tag and downloading GIF, PNG, JPG files. Alternatively, we can use objects that are rendered by plug-ins, such as SVG – though we will see some native SVG support in the next generation of web-browsers. Simply drawing pictures in JavaScript was not really possible. Or was it? In any case, the relatively new CANVAS tag is about to change the landscape. And will be strong competition in some situations for SVG as ‘drawing technology’.  ....

For a long time I have been trying to find out whether – and how – I could make simple drawings, most likely graphs and charts like pie-chart and line-graph, from JavaScript. I have run into primitive stuff like creating a Bar Chart by stretching table cells (set COLSPAN to any number between 1 and 100 to represent the value). Another rather far-fetched though pretty well worked out example used an image of a diagonal line and stretched in horizontal and vertical direction to get it pointing in any direction and of any length (see Drawing Lines in JavaScript). Of course this only works well for straight lines. The same approach of stretching images as seen above was used to create a Bar Chart: take an image of a rectangle – change its height or width property and you can show bars of varying sizes (see Creating graphs using JavaScript). I was sort of impressed by all the clever work-arounds, but found them basically far fetched and not really workable.

Then I came across something new. The CANVAS element. New in the Web Application 1.0 Specification that describes the successor to HTML4 and XHTML1. A specification that browsers like Firefox, Safari and Opera take their lead from. And perhaps Internet Explorer as well???

Web Application 1.0 Specification

A little citation from the Web App specification:  

"HTML, CSS, DOM, and JavaScript provide enough power that Web developers
have managed to base entire businesses on them. What is required are
extensions to these technologies to provide much-needed features such as:

  • Native pop-up menus and context menus.

  • Inline markup for pop-up windows, for example for dialog boxes or tool
    palettes, so that dialogs need not be defined in separate files.

  • Command updating: applications that have several access points for the
    same feature, for instance a menu item and a tool-bar button, would
    benefit from having to disable such commands only once, instead of having
    to keep each access point synchronized with the feature’s availability at
    all times. Similarly menu items or tool-bar buttons that represent a
    toggle state could automatically stay synchronized whenever toggled.

  • Server-sent events: triggering DOM3 Events from the server-side, for
    example for tickers or status updates.

  • Client-server communications methods that do not require page loads,
    enabling on-demand data retrieval (where the UA automatically fetches
    data from the server as required), remote procedure calls (where script
    can invoke code on the server side and get an XML fragment in return),
    etc.

  • More device-independent DOM events: The DOM event set needs
    device-independent events, such as events that fire when a button or link
    is activated, whether via the mouse or the keyboard.
    DOMActivate is a start, but it lacks equivalent HTML
    attributes, and additional events may be needed.

    • Comments are closed
    • Gavin Doughtie
      #1 written by Gavin Doughtie 5 years ago

      There’s also some work I did on SVG/VML drawing at xdraw.org, along with my OSCON 2006 slides on various browser graphics techniques.

    • Lucas Jellema
      #2 written by Lucas Jellema 7 years ago

      I did overlook another library that attempts drawing in JavaScript, cross browser, no SVG plugin required and even support in fairly old browsers.

      It is called High Performance JavaScript Vector Graphics Library.
      Developed by Walter Zorn and to be found at
      http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm.

      It works by painting pixels as DIVs with a colored background. For heavy duty graphics stuff, it will be very slow. But for simple things like a line, a circle or even a simple graph it will do the job.

    • Comment Feed for this Post