HTML5_Canvas_Cheat_Sheet

Document Sample
HTML5_Canvas_Cheat_Sheet Powered By Docstoc
					HTML5 Canvas Cheat Sheet v1.1                                                              http://blog.nihilogic.dk/

Canvas element                                                Compositing
Attributes                                                    Attributes
Name              Type                 Default                Name                 Type              Default
width             unsigned long        300                    globalAlpha          float             1.0
height            unsigned long        150                    globalCompositeOperation
                                                                                 string               source-over
Methods
                                                                  Supports any of the following values:
Return            Name
string            toDataURL(
                    [Optional] string type,
                    [Variadic] any args)
Object            getContext( string contextId)
                                                                     source-over       source-in     source-out
2D Context
Attributes
Name              Type
canvas            HTMLCanvasObject [readonly]
                                                                     source-atop   destination-over destination-in
Methods
Return            Name
void              save( )
void              restore( )

Transformation                                                    destination-out destination-atop        lighter

Methods
Return            Name
void              scale( float x, float y)
void              rotate( float angle)
                                                                        copy               xor
void              translate( float x, float y)
void              transform(
                    float m11, float m12,
                                                              Line styles
                    float m21, float m22,
                                                              Attributes
                    float dx, float dy)
void              setTransform(                               Name                 Type              Default
                    float m11, float m12,                     lineWidth            float             1.0
                    float m21, float m22,                     lineCap            string               butt
                    float dx, float dy)                           Supports any of the following values:
                                                                      butt         round        square
Image drawing
Methods
Return            Name
void             drawImage(                                   lineJoin           string               miter
                    Object image,                                 Supports any of the following values:
                    float dx, float dy,                              round         bevel        miter
                    [Optional] float dw, float dh)
    Argument "image" can be of type HTMLImageElement,
    HTMLCanvasElement or HTMLVideoElement
void             drawImage(
                    Object image,
                    float sx, float sy, float sw, float sh,   miterLimit           float             10
                    float dx, float dy, float dw, float dh)
Colors, styles and shadows                                      Text
Attributes                                                      Attributes
 Name               Type                 Default                 Name               Type                  Default
 strokeStyle        any                  black                   font               string                10px sans-serif
 fillStyle          any                  black                   textAlign            string             start
 shadowOffsetX      float                0.0                         Supports any of the following values:
 shadowOffsetY      float                0.0                         [start, end, left, right, center]
 shadowBlur         float                0.0                     textBaseline       string               alphabetic
                                                                     Supports any of the following values:
 shadowColor        string               transparent black
                                                                     [top, hanging, middle, alphabetic, ideographic, bottom]
Methods
                                                                Methods
 Return             Name
                                                                 Return             Name
 CanvasGradient     createLinearGradient(
                                                                 void               fillText(
                      float x0, float y0, float x1, float y1)
                                                                                       string text, float x, float y,
 CanvasGradient createRadialGradient(
                                                                                       [Optional] float maxWidth)
                      float x0, float y0, float r0,
                                                                 void               strokeText(
                      float x1, float y1, float r1)
                                                                                       string text, float x, float y,
 CanvasPattern      createPattern(
                                                                                       [Optional] float maxWidth)
                      Object image, string repetition)
                                                                 TextMetrics        measureText( string text)
    Argument "image" can be of type HTMLImageElement,
    HTMLCanvasElement or HTMLVideoElement                       TextMetrics interface
    "repetition" supports any of the following values:
                                                                 width              float                 [readonly]
    [repeat (default), repeat-x, repeat-y, no-repeat]
CanvasGradient interface                                        Rectangles
 void               addColorStop(
                      float offset, string color)
                                                                Methods
                                                                 Return             Name
CanvasPattern interface
                                                                 void               clearRect(
   No attributes or methods.                                                           float x, float y, float w, float h)
                                                                 void               fillRect(
Paths                                                                                  float x, float y, float w, float h)
                                                                 void               strokeRect(
Methods                                                                                float x, float y, float w, float h)
 Return             Name
 void               beginPath( )                                Pixel manipulation
 void               closePath( )
 void               fill( )
                                                                Methods
 void               stroke( )                                    Return             Name
 void               clip( )                                      ImageData          createImageData( float sw, float sh)
 void               moveTo( float x, float y)                    ImageData          createImageData( ImageData
 void               lineTo( float x, float y)                    imagedata)
 void               quadraticCurveTo(                            ImageData          getImageData(
                       float cpx, float cpy,                                          float sx, float sy, float sw, float sh)
                       float x, float y )                        void               putImageData(
 void               bezierCurveTo(                                                    ImageData imagedata,
                       float cp1x, float cp1y,                                        float dx, float dy,
                       float cp2x, float cp2y,                                        [Optional] float dirtyX, float dirtyY,
                       float x, float y )                                             float dirtyWidth, float dirtyHeight)
 void               arcTo(
                       float x1, float y1,                      ImageData interface
                       float x2, float y2, float radius )        width              unsigned long         [readonly]
 void               arc(                                         height             unsigned long         [readonly]
                       float x, float y, float radius,
                                                                 data               CanvasPixelArray      [readonly]
                       float startAngle, float endAngle,
                       boolean anticlockwise )                  CanvasPixelArray interface
 void               rect( float x, float y, float w, float h)
                                                                 length             unsigned long         [readonly]
 boolean            isPointInPath( float x, float y)




Source: http://www.whatwg.org/specs/web-apps/current-work/ (2009-05-04)

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1
posted:2/19/2012
language:English
pages:2