GEK's Bezier Curve Editor for javascript canvas (best use with chrome)
Sorry: This browser does not support Canvas :(
Ctrl + Alt + leftclick start new bezier path
Ctrl + leftclick add point to bezier path
Ctrl + leftclick on point insert point before next point
Shift + leftclick on point delete point from path
Alt + leftclick on point + drag move bezier path
element color alpha
bezier point
bezier control point 1
bezier control point 2
bezier curve
curve fill preview 
offset point (x,y)
offset mirror points
grid
grid width px
silent handles
Ctl Point freeze
sclae curve
relative to offset
background Image URL
show
origin image

offset point

the origin x/y point of the curve. By creating the javascript function the points of the curve will be calculated relative to this point. You can drag this point .
curve with handles

point handles

red = bezier point. green and orange are the bezier control points.
You can move this points by dragging.
silent mode image

silent handles

in this mode the handles of a bezier point will only be highlighted by moving the mousecursor over a handle. This is useful in case your curve has many points.

Ctl point freeze

if checked: by dragging the bezier point (red)  the control points (green,orange) will not move.
Anyway the control points can be moved using the mouse.
mirror points image

mirror points

by dragging a handle mirror points will be shown. One mirrored on x-axis and one mirrored on y-axis (where offset point ist the origin). This can help if you need some kind symmetry.

colors & alpha

 change colors in order to distinguish your curve from the background image.
Use alpha to control transparency of your curve. This way it's easier to compare with background image. Of course use alpha to hide features you don't wan to see (eg mirror points or fill preview)

fill preview

 this shows how canvas would fill the curve using closePath() and fill() functions.

selected curve to function

 this will create the javascript function which draws the selected curve.

function drawBezierCurve(ctx, xPos, yPos, scale)
ctx: the canvas context
x/yPos: location where to draw the curve. (see  'offset point')
scale: a factor that can be used to size the curve (usually 1.0). Scale will be done relative to x/yPos.

Note:
A remark will be created. It contains a string which can be used to reload the curve in this editor.
emimage Have fun! I'll check emails from time to time.

www.gektop.at