Use Cases for The <canvas> Element

Hi,
   Recently, John Foliot asked for evidence to support the inclusion of 
the <canvas> element in HTML5 [1]:

> Please point me to the research that proves that <canvas> is
> REQUIRED, WANTED OR NEEDED by *users* - not developers, *USERS!*. 

The way to demonstrate a need or want for a feature by users in this 
case, is to look at the functionality that existing websites provide for 
users using alternative tools and methods, which ultimately form the use 
cases for the canvas element.

Users want an increasingly dynamic and interactive experience on the 
web.  Providing dynamic graphics is one way in which this can be 
achieved.  So by providing examples where dynamic and interactive 
graphics have been used in the past, demonstrates the need for canvas.

In the past, Flash and Java have been used for dynamic and/or 
interactive graphics (among other things).  Canvas provides a way to do 
that with HTML and JavaScript, and there are already examples of it 
being put to use in the wild.

Here are a few examples demonstrating the use cases.  Some use Java, 
others use canvas.  I couldn't find any relevant Flash examples, though 
one site mentioned that they had used Flash before switching to canvas.


*Mathematics*
(Shapes, Graphs, etc.)

1. http://mathworld.wolfram.com/Cylinder.html

    This example uses a Java applet to render a cylinder that the
    user can  move around by dragging the mouse to inspect it.
    There are many other similar examples on this site.

2. http://polyhedra.org/poly/show/45/square_pyramid

    This examples actually uses the canvas element for rendering
    various 3D models.  The site appears to be a some sort of
    educational site about polyhedra shapes.  Interestingly, the
    about page on the site describes how they had used Flash in the
    past, but changed to using canvas when it became available.
    http://polyhedra.org/poly/about/

3. http://gcalc.net/

    This example is an online graphics calculator.  It's built using
    a Java applet and allows the user to plot graphs of mathematical
    equations.

4. http://www.liquidx.net/plotkit/

    PlotKit is a script that can draw graphs from a set of data
    (e.g. in a table) using either canvas or SVG.


*Applications*

5. http://pipes.yahoo.com/pipes/

    Yahoo! Pipes uses canvas to provide the interactive application
    to build "pipes".

6. http://canvaspaint.org/

    Canvas Paint is a clone of MS Paint built using canvas.  You might
    argue that such an application doesn't really serve a practical
    purpose, which may be true because basic paint applications probably
    come with most operating systems.  However, there a variety of ways
    it could be put to a real practical use:

    a. A Shared Whiteboard allows users to draw on their screen and have
       it replicated on another.  MSN Messenger, for example, provides
       that ability over their IM chat network.  Canvas, in conjunction
       with XMLHttpRequest, Server Sent Events or maybe even the
       TCPConnection interfaces being worked on in the Web API WG would
       allow this to be done using an ordinary web browser.

    b. A web based email application could provide a basic paint tool for
       drawing quick sketches to be emailed to someone.


*Games and Puzzles*

7. Rubik's Cube Java Applets
    http://www.rubiks.com/cube_online.html

    There are quite a few of these on various web sites, that's
    just one of them.  It uses a java applet to render the
    interactive cube.

8. http://nic-nac-project.de/~jcm/index.php?nav=puzzle

    This example implements slide puzzles using canvas.

9. http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm

    This is a prototype of a first-person shooter game built using
    canvas.  It allows the user to walk around the map, but doesn't
    yet provide any actual game play beyond that.


*Widgets and Extensions*

10. http://www.oxymoronical.com/web/firefox/TabSidebar

     The Tab Sidebar extension for Firefox uses canvas to render
     smaller preview of web pages in the side bar, which makes it
     easier to recognise and select the page to switch to.

11. Apple originally invented canvas for their OSX Dashboard, and so it
     seems likely that there would be a wide variety of widgets that make
     use of canvas for something.  It's likely that there would also be
     widgets for Opera that use canvas too.  Although I'm not familiar
     with many widgets, or how they work, so I can't provide any specific
     examples.


*Art and Presentation*

12. http://cow.neondragon.net/stuff/reflection/

     This example uses canvas to add a reflection effect to images.
     There's a list of implementations at the bottom of that page
     showing practical uses of the effect.

Note that several of those use cases are also use cases for introducing 
a 3D context, in addition to the existing 2D context.

It is also worth noting that canvas was implemented by 3 major browsers 
before it got added to the spec, so the implementers clearly saw a 
market demand for it.  Since it needs to be interoperably implemented to 
be useful, it needs to be specced, and HTML5 is the ideal place to do it.

[1] http://lists.w3.org/Archives/Public/public-html/2007Jul/1118.html

-- 
Lachlan Hunt
http://lachy.id.au/

Received on Sunday, 29 July 2007 17:01:09 UTC