Javascript Anti-Aliasing

This is one of my favourite scripts, and definitely the silliest. The concept of making graphics using html and javascript still makes me giggle. The script uses a HTML table like a pixel display (the settings on the left control size and colour), and generates shapes based on their geometric formula (the settings on the right). The neat part is that at the edges of the shapes (where some of the pixel is inside and some outside) the script calculates a shade based on the proportion covered, giving a "smooth" edge. It's not perfect (the default value for the circle shows one of the bugs at the extremities of each circle, although they're not visible with all combinations). Have a play and see what you think.

Note that because JS is in no way shape or form designed to process graphics, the script is likely to become horribly laggy at large pixel fields (say, 100x100). Don't worry, your computer hasn't crashed, but your browser is probably munching into your memory. Come back in ten minutes and see the prettiness.

field: defines the width and height of your pixel field.
height:
width:
cell dimensions: some displays don't seem to display square cells; this allows you to adjust the pixel width of each cell.
w:
h:
Colour: Choose a colour for the background and foreground of the objects. (0-255)
Background:
R: G: B:
Foreground:
R: G: B:
pattern: This part of the script generates a two dimensional colour gradient, testing the principle of generating a pixel field from a html table.
Go!
straight line: generate a straight line with equation y=mx+c
m:
c:
Go!
Circle Generate a circle with centre A,B and radius r (using the equation [x-a]^2 + [y-b]^2 = r^2):
A:
B:
r:
Go!