How can I draw a diminishing wavy ray or complex figures in HTML5 / Canvas

I am trying to generate some sun 'rays' which I can best describe as looking like the blade of a krisknife, such as the blade portion of this picture. this

This is just an example. I only need a triangular shape with two or three waves that I can close and fill.

Better yet, is there some HTML5 app with which I can draw a complex figure and then export the javascript (moveTo, arcTo, bezierCurveTo, quadraticCurveTo, ...). Something similar to HTML5 Bezier Sketcher but which saves the javascript. Trying to draw complex figures blind is very difficult and I don't want to switch to SVG if it is not necessary.

Thanks 1,000,000

Edit: I have now also looked at all the options at this site. None will allow me to draw and fill simple curves and then see/save canvs commands. All that show commands show them in new libraries like fabric or jsDraw2D.

Solution

I found the answer among the solutions for Convert SVG to Canvas friendly output. The author didn't think it worked for him, but I think it's as perfect as any I have seen.

Professor Cloud (...is frikkin' amazing! This isn't the first thing he's done I have found incredibly useful.) created a site to take SVG input and product Canvas output. You can see it here, at Professor Cloud SVG-to-Canvas.

Using this site, I can draw something or even take a stock vector image in AI, export as SVG, cut out the commands and past them into Prof. Clouds amazing SVG-chipper, and get Canvas code. I understand it doesn't support full SVG capabilities, but then, neither does Canvas. Great for me.