Canvas Object Canvas Object Hier ein Beispiel generiert aus SVG("http://www.gocher.me/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("http://www.gocher.me/code/HTML5_logo.htm") JavaScript: HTML5_logo.js("http://www.gocher.me/code/HTML5_logo.js")