Library/HTML/Minimal Javascript Canvas Tutorial

Important: this tutorial assumes you are using JQuery.

Insert the HTML Canvas Element
Below is an example that inserts a canvas element with the id "canvas" (this can be changed to any string name), adds a thin border (to clearly define the bounds of the canvas), and sets to to be 300x300 pixels.

Get the Javascript Canvas 2d object
Here the JQuery document ready event gets the context object ("ctx"). This object is used for all the drawing operations.

;

Draw A Circle
Two steps here:
 * 1) The canvas is scaled and transformed to a normalized (-0.5, -0.5) to  (0.5, 0.5) space, lower-left to upper-right.  The default canvas space will be in pixel space otherwise.  Any coordinate space can be used: this tutorial simply is using a Cartesian-based orientation as an example.
 * 2) The path, arc, and fill methods draw a circle

The HTML5 Canvas Specification provides reference on additional methods on the context object.