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