• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 canvas cheat_sheet
 

Html5 canvas cheat_sheet

on

  • 1,084 views

 

Statistics

Views

Total Views
1,084
Views on SlideShare
1,083
Embed Views
1

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 canvas cheat_sheet Html5 canvas cheat_sheet Document Transcript

    • 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)