• HTML
• AddedElementCanvas

New canvas element

Table of Contents:

Issue

Justification for adding the "canvas" element.

Details: canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs, games, et cetera.

Rationale: Why this Element Should be Added

1. Users want an increasingly dynamic and interactive experience on the web. Providing dynamic graphics is one way in which this can be achieved.

2. 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.

3. There are already examples of it being put to use in the wild.
4. SVG is used for an entirely different type of drawing that meets different needs and is substantially more complex to implement.

5. Applicable Design Principles (proposed)

   • Specific Principle
   • Specific Principle
   • Specific Principle
   • Specific Principle

Rationale: Why this Element Should Not be Added

1. Research is required that proves that <canvas> is required, wanted or needed by USERS - not developers.

2. Canvas is (one of many possible) solutions for dynamic and interactive graphics. For instance the behaviour of the canvas element could be applied to an existing element like img instead.
3. Canvas focuses on a on potential solution rather than a problem.
4. Adding this element will cause code bloat. A completely new element is not justified.
5. SVG provides drawing functionality.

   • SVG examples taken in the wild and related for the use cases "is canvas elements really needed?" - Karl Dubost

6. Applicable Design Principles (proposed)

   • Specific Principle
   • Specific Principle
   • Specific Principle
   • Specific Principle

Advice From Authorities

• Need to Add - Author

Research

• Need to Add - Author

Examples

• Need to Add - Author

Use Cases

• Mathematics:

  • cylinder 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.

  • square_pyramid 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. For more info [ http://polyhedra.org/poly/about/ visit the about page of the site.]

  • Graphics calculator is built using a Java applet and allows the user to plot graphs of mathematical equations.

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

• Applications:

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

  • Canvas Paint 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 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.
    • A web based email application could provide a basic paint tool for drawing quick sketches to be emailed to someone.
• Games and Puzzles:

  • Rubik's Cube Java Applets. 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.

  • slide Puzzles implements slide puzzles using canvas.

  • Shooter game 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:

  • Tab Sidebar extension for Firefox 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.

  • 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

  • Reflection 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.
• Related Use Case Notes:
  • 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.

Policies, Guidelines, and Law

• Need to Add - Author

Related References

• Need to Add - Author

Related E-mail: July 2007

RE: conflation of issues or convergence of interests?

• RE: conflation of issues or convergence of interests? - John Foliot (Sunday, July 29)

Use Cases for The <canvas> Element

• Use Cases for The <canvas> Element - Lachlan Hunt (Sunday, July 29)

  • Use Cases for The <canvas> Element - Philip Taylor (Webmaster) (Sunday, July 29)

  • Use Cases for The <canvas> Element - Lachlan Hunt (Sunday, July 29)

  • Use Cases for The <canvas> Element - Lee Kowalkowski (Sunday, July 29)

  • Use Cases for The <canvas> Element - Karl Dubost (Sunday, July 29)

  • Use Cases for The <canvas> Element - Patrick H. Lauke (Sunday, July 29)

  • Use Cases for The <canvas> Element - James Graham (Sunday, July 29)

  • Use Cases for The <canvas> Element - Sander Tekelenburg (Sunday, July 29)

  • Use Cases for The <canvas> Element - Lachlan Hunt (Sunday, July 29)

  • Use Cases for The <canvas> Element - Jon Barnett (Monday, July 30)

  • Use Cases for The <canvas> Element - Karl Dubost (Monday, July 30)

  • Use Cases for The <canvas> Element - Laura Carlson (Monday, July 30)

  • Use Cases for The <canvas> Element - Lachlan Hunt (Monday, July 30)

  • Use Cases for The <canvas> Element - Robert Burns (Monday, July 30)

  • Use Cases for The <canvas> Element - Maciej Stachowiak (Monday, July 30)

  • Use Cases for The <canvas> Element - James Graham (Monday, July 30)

  • Use Cases for The <canvas> Element - Robert Burns (Monday, July 30)

  • Use Cases for The <canvas> Element - Maciej Stachowiak (Monday, July 30)

  • Use Cases for The <canvas> Element - Robert Burns (Monday, July 30)

  • Use Cases for The <canvas> Element - Karl Dubost (Monday, July 31)

  • Use Cases for The <canvas> Element - Philip Taylor (Monday, July 31)

  • Use Cases for The <canvas> Element - Karl Dubost (Monday, July 31)

  • Use Cases for The <canvas> Element - Philip Taylor (Monday, July 31)