The Safari/Dashboard Canvas is an extension to HTML/JavaScript which allows 2D drawing directly on an HTML page.  This is incredibly useful as before you had to either rely on a server side image generation, or ugly javascript drawings.

While the canvas is really nice, example code/documentation seems to be sparse.  I'm using this to keep down notes for myself.  Please add more, and if you find other good resources, please point to them.

Note: Canvas is available in Safari 1.3 and up. This comes with 10.3.9 or 10.4.x (Tiger)

Turning on Safari Debug Menu

defaults write com.apple.Safari IncludeDebugMenu 1

Example using code snippets below - view source to see code

Creating a canvas

changing it

New comment from meGetting a JavaScript Handle to the Drawing Context

var canvas = document.getElementById("canvas_name"); var context = canvas.getContext("2d");

Contents
[Hide]
1 Creating a canvas
    1.1 Drawing

Drawing

• Rectangle
• context.fillRect(0, 0, 200, 200);
• Lines
• context.setStrokeColor("red",1.0);
• context.setLineWidth(2.0);
• context.beginPath();
• context.moveTo(50,50);
• context.lineTo(100,100);
• context.stroke();

http://developer-test.mozilla.org/en/docs/Drawing_Graphics_with_Canvas