Copy the code below and use it in any canvas.
Want to test it? Try it here.

Visual Learner's Canvas v0.5b

By Michael Greenhut

The purpose of this humble little art program is to show how the html5 canvas works,
and to generate canvas assets for you in a more visual manner. I recently made the journey from ActionScript 3 to html5, and I thought I'd share what I've learned so far.

Most of the drawing tools are self explanatory, except for the "selector" tool features.

Once you click on the selector, drag it across the screen to select a specific area. You'll see two options appear below it -- "capture code" and "capture image data".

Capture Code allows you to highlight any shape or group of shapes you've drawn and display the canvas code that produced them. Pay attention to the "code point" highlights that appear on your art -- those are the origin points for the shapes they're touching. Selecting those spots will display their code.

Capture Image Data captures any image data in your selection box, then opens it in a new window as a PNG. Right click to save the PNG to your hard drive, then use it for an asset.

In the future, I'll add more dynamic color stop options for the gradients, and maybe more sophisticated tools. Questions? Comments? Bugs? e-mail me at
Right click to save me!