HTML5 Canvas Cheat Sheet - تلخيص مختصر

Canvas Element

Attributes

Name	Type	Default
width	unsigned long	300
height	unsigned long	150

Methods

Return	Name
string	toDataURL( [optional] string type, [variadic] any args)
object	getContext(string contextId)

2D Context

Attributes

Name	Type
canvas	HTMLCanvasObject [readonly]

Methods

Return	Name
void	save()
void	restore()

Transformation

Methods

Return	Name
void	scale(float x, float y)
void	rotate(float angle)
void	translate(float x, float y)
void	transform( float m11, float m12, float m21, float m22, float dx, float dy)
void	setTransform( float m11, float m12, float m21, float m22, float dx, float dy)

Image Drawing

Method

Return	Name
void	drawImage( object image, float dx, float dy, [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, float dx, float dy, float dw, float dh)

Compositing

Attributes

Name	Type	Default
globalAlpha	float	1.0
globalCompositeOperation	string	source-over

supports any of the following values:

Line Style

Attributes

Name	Type	Default
lineWidth	float	1.0
lineCap	string	butt Supports any of the following values:
lineJoin	string	miter supports any of the following values:
miterLimit	float	10

Colors, Styles and Shadows

Attributes

Name	Type	Default
strokeStyle	any	black
fillStyle	any	black
shadowOffsetX	float	0.0
shadowOffsetY	float	0.0
shadowBlur	float	0.0
shadowColor	string	transparent black

Methods

Return	Name
canvasGradient	createLinearGradient(float x0, float y0, float x1, float y1)
canvasGradient	createRadialGradient( float x0, float y0, float r0, float x1, float y1, float r1)
canvasPattern	createPattern(Object image, string repetition) Argument "image" can be of type HTMLImageElement, HTMLCanvasElement or HTMLVideoElement "repetition" supports any of the following values: [repeat (default), repeat-x, repeat-y, no-repeat]

CanvasGradient interface

Return	Name
void	addColorStop(float offset, string color)

canvasPattern interface

Return	Name
No attributes	or methods.

Paths

Methods

Return	Name
void	beginPath()
void	cloasePath()
void	fill()
void	stroke()
void	clip()
void	moveTo(float x, float y)
void	lineTo(float x, float y)
void	quadracticCurveTo(float cpx, float cpy, float x, float y)
void	bezierCurveTo( float cp1x, float cp1y, float cp2x, float cp2y, float x, float y)
void	arcTo(float x1, float y1, float x2, float y2, float radius)
void	arc( float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise)
void	rect(float x, float y, float w, float h)
boolean	isPointInPath(float x, float y)

Text

Attributes

Name	Type	Default
font	string	10px sans-serif
textAlign	string	start supports any of the following values: [start, end, left, right, center]
textBaseline	string	alphabetic supports any of the following values: [top, hanging, middle, alphabetic, ideographic, bottom]

Methods

Return	Name
void	fillText(string text, float x, float y, [optional] float maxWidth)
void	strokeText(string text, float x, float y, [optional] float maxWidth)
TextMetrics	measureText(string text)

TextMetrics interface

Name	Type	Default
width	float	[readonly]

Rectangles

Methods

Return	Name
void	clearRect(float x, float y, float w, float h)
void	fillRect(float x, float y, float w, float h)
void	strokeRect(float x, float y, float w, float h)

Pixel Manipulation

Methods

Return	Name
ImageData	createImageData(float sw, float sh)
ImageData	createImageData(ImageData imagedata)
ImageData	getImageData(float sx, float sy, float sw, float sh)
void	putImageData( ImageData imagedata, float dx, float dy, [optional] float dirtyx, float dirtyY, float dirtyWidth, float dirtyHeight)

ImageData interface

Name	Type	Default
width	unsigned long	[readonly]
height	unsigned long	[readonly]
data	canvasPixelArray	[readonly]

canvasPixelArray interface

Name	Type	Default
length	unsigned long	[readonly]