Canvas: ======= - Defines a 2D or 3D drawing area for JavaScript programs. Attributes: width, height - Sets the width and height of the canvas. Defaults to 300x150. Don't use CSS to set the width and height, as that just zooms the default 300x150. - Setting either of these properties will reset the canvas to transparent black and resets all its graphic attributes to their default values. JS Methods: ---------- object getContext(string contextID, [args..]) contextID = "2d" - Returns a canvas rendering context. var context = document.getElementById("my_canvas").getContext("2d"); - Gets the 2D drawing context from the canvas element. CanvasRenderingContext2D: ========================= Properties: ----------- font The font used for text-drawing, same syntax as the CSS font attribute. lineWidth Specifies line width for line drawing operations. default 1, lines are centered over the path. strokeStyle Like fillStyle, specifies for line drawing operations. fillStyle The current color, pattern or gradient used for filling paths. Can be a CSS color, or CanvasGradient or CanvasPattern object. textAlign Specifies horizontal text alignment. 'left', 'center', 'right'. + many more Methods: -------- beginPath() - Discards any currently defined path and begins a new one. closePath() - Closes the current open subpath by drawing a line from the current point to the first point in the path. lineTo(double x, y) - Adds a straight line to the current subpath. moveTo(double x, y) - Sets the current position to x,y and begins a new subpath. fill() - fills the current path using the current fillStyle property. Any subpaths not closed are filled as if closePath() had been called (but the paths are not actually closed.) Filling does not clear the path, so you can call stroke() after filling. stroke() - Draws the outline of the current path. arc(double x, y, radius, startAngle, endAngle, [boolean anticlockwise]) boolean isPointInPath(x, y) - Returns true if the specified point is inside or on the edge of the current path, false otherwise. ex: Rectangles: ---------- rect(double x, y, w, h) - Adds a rectangle to the path as its own subpath and is not connected to any other subpath. clearRect(double x, y, width, height) - fills the specified rectangle w/ transparent black. Doesn't affect the current point or path. fillRect(double x, y, width, height) - fills the specified rectangle. Has not affect on the current point or path. strokeRect(double x, y, width, height) - draws the outline of a rectangle. Has no affect on the current point or path. Text: ----- fillText(string text, double x, y [, maxWidth]) - Draws text using the current fillStyle property. TextMetrics measureText(string text) - Measures the width the specified text would occupy if drawn with the current font. StrokeText(string text, double x, y, [maxWidth]) - Like fillText, but only the outline of the text. Saving and restoring graphics state: ----------------------------------- save() - Pushes a copy of the current graphics state to a stack. restore() - Pops the stack of saved graphics states and restores the values of the CanvasRenderingContext2D properties, the clipping path and the transformation matrix. Used w/ save(). Transformations: --------------- rotate(double angle) - Alters the transformation matrix so that any subsequent drawing appears rotated within the canvas by the specified angle. Angle is in radians. radians = (degrees*Math.PI)/180 scale(double sx, sy) - Sets x and y scaling factors. translate(double x, y) - adds x and y offsets to the transformation matrix.