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

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