Labs/Bespin/DesignDocs/Inline Documentation/Canvas

Overview

Canvas is an HTML element that allows you to generate images using javascript. This is in contrast to SVG and VML which are systems for generating Vector primitives that are added to the DOM.

In contrast Canvas elements act just like <img> elements in that they are represented by only one DOM element, and are comprised of a 2D grid of pixels.

Currently the Canvas element is not fully support in all mainstream browsers, the IE series of browser has no native support for it. Some emulation of canvas is possible (IECanvas for example) but the performance is poor and doesn't support support certain features like getImageData. Currently there is no strong 'goto' Documentation for Canvas. We would like to fix this with Bespin's inline documentation.

The current plan is to experiment with building a Canvas documentation system that has the following features:

• Includes cross referenced:
  • API Reference
  • Tutorials
  • Example Code
  • Advanced Topics

Existing

Documentation

• Canvas Topics (Mozilla Developer Center)
• Wikipedia
• WhatWG Canvas Element
• Nihologic Cheatsheet (HTML, PDF, .PNG)
  • Blog Entry on it
  • Blog 'Update' Entry on it
• Browser Coverage

Tutorials

• Canvas Tutorial

Demos

• Galleries
  • Chrome Experiments
  • Nihilogic Labs
  • Ben Joffe
  • Wii Opera SDK (Interactive Raycasting demo index)
    • Ray tracer
    • Ripple
    • Shooting
    • Shadow
    • Texturemap
    • Wall
    • Sidescroller

See also

• Processingjs: Exhibition, Basic Demos, Topic Demos, and Custom Demos
• Algorithmic Ink: Site, Blog Intro