html-canvas.js

//Canvas API        - An itsy bitsy taste of the massive functionality in the Canvas object.

// Basic Methods for Fills and Strokes:

ctx.globalCompositeOperation - Controls how bit blitting is performed, default is "source-over".
ctx.globalAlpha              - Sets the global alpha channel.
ctx.imageSmoothingEnabled    - Enables/disables image smoothing.

ctx.scale()                  - Scales image rendering in x,y axes.
ctx.translate()              - Translates the rendering.
ctx.rotate()                 - Rotates the rendering.

ctx.fillStyle     - Sets the color of the fill.
ctx.fillRect()    - Draws a filled rectangle.

ctx.clearRect()   - Clears a rectangle.
ctx.arc()         - Draws an arc from 0 to 2PI, can be used for open or closed circle.
ctx.strokeStyle   - Sets the color for stroked objects.
ctx.lineWidth     - Sets the line width for stroked objects.
ctx.strokeRect()  - Draws a stroked rectangle.

// Path Methods:
ctx.beginPath()   - Creates a new path. Once created, future drawing commands are directed into the path 
                    and used to build the path up.
ctx.moveTo()      - Moves the path cursor to a new location in coordinate system.
ctx.lineTo()      - Add a line to the path.
ctx.closePath()   - Adds a straight line to the path, going to the start of the current sub-path.
ctx.stroke()      - Draws the shape by stroking its outline.
ctx.fill()        - Draws a solid shape by filling the path's content area.

// Advanced Paths:
var path = new Path2D() - Creates a new "path" object that can record path strokes and can be played back later.

// --- Timing Functions (window object)
setInterval()     - Starts repeatedly executing the function specified by function every delay milliseconds.
setTimeout()      - Executes the function specified by function in delay milliseconds.
requestAnimationFrame(callback) - Tells the browser that you wish to perform an animation and requests that 
                                  the browser call a specified function to update an animation before the next repaint.

// State of Context
ctx.save()        - Saves the current context state.
ctx.restore()     - Restores the current context state.

// Fonts and Text
ctx.font = "font name"    - Sets the font to use when drawing text.
ctx.fontSize = "16px"     - Sets the font size when rendering text.
ctx.textAlign = "center"  - Sets the font rendering alignment.
ctx.fillText()            - Draws filled text.

// Some Web Safe Fonts (maybe)

 /*   Helvetica (sans-serif)
    Arial (sans-serif)
    Arial Black (sans-serif)
    Verdana (sans-serif)
    Tahoma (sans-serif)
    Trebuchet MS (sans-serif)
    Impact (sans-serif)
    Gill Sans (sans-serif)
    Times New Roman (serif)
    Georgia (serif)
    Palatino (serif)
    Baskerville (serif)
    Andalé Mono (monospace)
    Courier (monospace)
    Lucida (monospace)
    Monaco (monospace)
    Bradley Hand (cursive)
    Brush Script MT (cursive)
    Luminari (fantasy)
    Comic Sans MS (cursive)
    Consolas
*/

// Bitmap API

drawImage(image, dx, dy) // 1:1 no fuss
drawImage(image, dx, dy, dWidth, dHeight) // allows scaling of destination
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)