Canvas Object
Canvas Object
Hier ein Beispiel generiert aus  SVG , mit Hilfe von Adobe Illustrator und Ai2Canvas, der  Code  steht weiter unten.
Canvas element	Attribute	width	unsigned long (default 300)	
height	unsigned long (default 150)	
Method	toDataURL	string type (optional), any args (Variadic) returns string 	
getContext	string contextId returns Object	
2D Context	Attribute	canvas	HTMLCanvasObhect (readonly)	
Method	save	
	
restore	
	
Transformation	Method	scale	float x, float y	
rotate	float angle	
translate	float x, float y	
transform	float m11, float m12, float m21, float m22, float dx, float dy	
setTransform	float m11, float m12, float m21, float m22, float dx, float dy	
Image drawing	Method	drawImage	Object image, float dx, float dy, float dw (optional), float dh (optional) (das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein)
	
Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh (das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein)	
Compositing	Attribute	globalAlpha	float (default 1.0)	
globalCompositeOperation	string (default source-over) Unterstützte Werte: source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy and xor	
Line styles	Attribute	lineWidth	float (default 1.0)	
lineCap	string (default butt)  Unterstützte Werte: butt, round, square	
lineJoin	string (default miter)  Unterstütze Werte: round, bevel, miter	
miterLimit	float (default 10)	
Colors, styles and shadows	Attribute	strokeStyle	any (default black)	
fillStyle	any (default black)	
shadowOffsetX	float (default 0.0)	
shadowOffsetY	float (default 0.0)	
shadowBlur	float (default 0.0)	
shadowColor	string (default transparent black)	
Method	createLinearGradient	float x0, float y0, float x1, float y1 returns CanvasGradient	
createRadialGradient	float x0, float y0, float r0, float x1, float y1, float r1 returns CanvasGradient	
createPattern	Object image, string replication returns CanvasGradient(das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein)	
CanvasGradient	Method	addColorStop	float offset, string color	
Path	Method	beginPath	
	
closePath	
	
fill	
	
stroke	
	
clip	
	
moveTo	float x, float y	
lineTo	float x, float y	
quadraticCurveTo	float cpx, float cpy, float x, float y	
bezierCurveTo	float cp1x, float cp1y, float cp2x, float cp2y, float x, float y	
arcTo	float x1, float y1, float x2, float y2, float radius	
arc	float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise	
rect	float x, float y, fload w, fload h	
isPointInPath	float x, float y, returns boolean	
Text	Attribute	font	string (default 10px sans-serif)	
textAlign	string (default start)  Unterstütze Werte: start, end, left, right, center	
textBaseline	string (default alphabetic)  Unterstütze Werte: top, hanging, middle, alphabetic, ideographic, bottom	
Method	fillText	string text, float x, float y, float maxWidth (optional)	
strokeText	string text, float x, float y, float maxWidth (optional)	
measureText	string text, returns TextMetrics	
TextMetrics	Attribute	width	float (readonly)	
Rectangles	Method	clearRect	float x, float y, float w, float h	
fillRect	float x, float y, float w, float h	
strokeRect	float x, float y, float w, float h	
Pixel manipulation	Method	createImageData	float sw, float sh, returns ImageData	

	ImageData imagedata	
getImageData	float sx, float sy, float sw, float sh, returns ImageData	
putImageData	ImageData imagedata, float dx, float dy, float dirtyX (optional), float dirtyY (optional), float dirtyWidth (optional), float dirtyHight (optional)	
Attribute	width	unsigned long (read only)	
height	unsigned long (read only)	
data	CanvasPixelArray (read only)	
CanvasPixelArray	Attribute	length	unsigned long (read only)	

HTML:
 HTML5_logo.htm 
JavaScript:
 HTML5_logo.js