GEK's Bezier Curve Editor for javascript canvas (best use with chrome) | |||||||||||||
|
|||||||||||||
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 | |||||||||||||
|
|||||||||||||
|
relative to offset | ||||||||||||
background Image URL | show | ||||||||||||
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 . |
|
point handlesred = bezier point. green and orange are the bezier control points.You can move this points by dragging. |
|
silent handlesin 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 pointsby 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. |
![]() |
Have
fun! I'll check emails from time to time. www.gektop.at |