Live app

https://zeke.blog/html5-canvas-gradient-creator-app/

HTML5 Canvas Gradient Creator

There are plenty of CSS3 gradient creators out there, but much to my surprise there was not a single gradient creator for HTML5 <canvas /> to be found. Thus I present to you the only one of its kind, the HTML5 Canvas Gradient Creator.

Features

• Visual point-and-click, drag-and-slide creation of gradients for HTML5/JS canvas
• 1-n color stops; as many as you need
• 0-255 bit alpha support
• Linear and radial gradients
• Linear gradient rotation
• Radial gradient inner and outer circle position
• Elliptical radial gradients
• Saving of custom presets (browser local storage)
• Valid, commented HTML5 and JS code output
• Responsive design

Minimum compatibility

This is minimum compatibility for usage of this tool, as well as for gradient code generated by this tool. Earlier versions of Chrome, Safari, or Opera might be supported.

• Chrome: WinXP/OS X SL Chrome 14
• Firefox: WinXP FF4 (FF3 for gradient code generated by tool), OS X SL FF5
• IE: Win7-8 IE9*
• Safari: WinXP/OS X SL Saf 4
• Opera: WinXP Opera 10, OS X SL Opera 11.1

* Inclusion of FlashCanvas or excanvas might enable support for gradients in earlier versions of IE.

Languages and libraries

• AngularJS
• CoffeeScript
• jPicker color picker
• prettify syntax highlighter
• angular-local-storage
• qTip tooltips
• Iconic icons

Building the CoffeeScript

See js/build.sh.