HTML5 <canvas> bezierCurveTo command generator

Using quadratic and cubic Bezier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. ... [I]f you have the time and, most of all, the patience, much more complex shapes can be created.

-- "Bezier and quadratic curves," MDN doc center

Translation: Someone will write a tool for this later

And here is mine! This is a tool to generate calls to bezierCurveTo via a bezier path drawing GUI.

Intended For: People who already know JavaScript/canvas and want to draw a simple non-standard shape, but don't want to fiddle with pixel values.
Not Intended For: Auto-generating code for those who don't know what they're doing; replacing a full-fledged awesome drawing program like Illustrator.
Source: Freely available on GitHub under the MIT license.

Path Edit Modes

add points move points remove points
lock adjacent control points Clear all points

Trace Path Over Image

Image URL: Set Canvas Background

Someday I might:

• Make an ACTUALLY useful app/library*
• Allow multiple paths
• Move paths
• Rotate paths
• Convert points btwn poiny and non
• Add Illustrator hotkeys
• Add point to segment
• Clean up code

If you'd like to do these things for me, have at!

(*This app would be way more useful if I exposed features to make the vector art "living" instead of a static dead picture. So what I really should be doing is generating code for a JS object + provide a library that can transform it in interesting ways. I have the bulk of this code in my JS file, just need to expose it prettily!)