Canvas
Canvas methods are mostly taken verbatim from HTML5 canvas API, except for some state attributes, which, in Socks, instead of accessing and modifying the attributes directly, getter and setter methods are used. For more information, check out canvas tutorial at MDC.
It would have been awesome if I ported Shoes Art API over, but I did not have enough time to work on that… Well, you could always help!
State Getters / Setters
Compositing
| getGlobalAlpha() |
→ |
number |
|
| setGlobalAlpha(nubmer globalalpha) |
→ |
this |
(default 1.0) |
| getGlobalCompositeOperation() |
→ |
string |
|
| setGlobalCompositeOperation(string globalcompositeoperation) |
→ |
this |
(default ‘source-over’) |
Colors and Styles
| getStrokeStyle() |
→ |
string |
|
| setStrokeStyle(string strokestyle_) |
→ |
this |
(default ‘black’) |
| getFillStyle() |
→ |
string |
|
| setFillStyle(string fillStyle_) |
→ |
this |
(default ‘black’) |
Line Styles
| getLineWidth() |
→ |
number |
|
| setLineWidth(number linewidth) |
→ |
this |
(default 1) |
| getLineCap() |
→ |
string |
|
| setLineCap(string linecap) |
→ |
this |
“butt”, “round”, “square” (default “butt”) |
| getLineJoin() |
→ |
string |
|
| setLineJoin(string linejoin) |
→ |
this |
“round”, “bevel”, “miter” (default “miter”) |
| getMiterLimit() |
→ |
number |
|
| setMiterLimit(number miterlimit) |
→ |
this |
(default 10) |
Shadows
| getShadowOffsetX() |
→ |
number |
|
| setShadowOffsetX(number shadowoffsetx) |
→ |
this |
(default 0) |
| getShadowOffsetY() |
→ |
number |
|
| setShadowOffsetY(number shadowoffsety) |
→ |
this |
(default 0) |
| getShadowBlur() |
→ |
number |
|
| setShadowBlur(number shadowblur) |
→ |
this |
(default 0) |
| getShadowColor() |
→ |
number |
|
| setShadowColor(string shadowcolor) |
→ |
this |
(default “transparent black”) |
Text
| getFont() |
→ |
string |
|
| setFont(string font) |
→ |
this |
(default: ‘10px sans-serif’) |
| getTextAlign() |
→ |
string |
|
| setTextAlign(string textalign) |
→ |
this |
“start”, “end”, “left”, “right”, “center” (default: “start”) |
| getTextBaseline() |
→ |
string |
|
| setTextBaseline(string baseline) |
→ |
this |
“top”, “hanging”, “middle”, “alphabetic”, “ideographic”, “bottom” (default: “alphabetic”) |
Methods
| clearCanvas() |
→ |
this |
Clears canvas. |
State Save / Restore
| save() |
→ |
this |
Saves the state of a canvas. |
| restore() |
→ |
this |
Restores the state of a canvas. |
Transformations
| scale(number x, number y) |
→ |
this |
|
| rotate(number angle) |
→ |
this |
|
| translate(number x, number y) |
→ |
this |
|
| transform(number m11, number m12, number m21, number m22, number dx, number dy) |
→ |
this |
|
| setTransform(number m11, number m12, number m21, number m22, number dx, number dy) |
→ |
this |
|
Colors and Styles
| createLinearGradient(number x0, number y0, number x1, number y1) |
→ |
CanvasGradient |
|
| createRadialGradient(number x0, number y0, number r0, number x1, number y1, number r1) |
→ |
CanvasGradient |
|
| createPattern(HTMLImageElement image, string repetition) |
→ |
CanvasPattern |
|
| createPattern(HTMLCanvasElement image, string repetition) |
→ |
CanvasPattern |
|
| createPattern(HTMLVideoElement image, string repetition) |
→ |
CanvasPattern |
|
Rects
| clearRect(number x, number y, number w, number h) |
→ |
this |
|
| fillRect(number x, number y, number w, number h) |
→ |
this |
|
| strokeRect(number x, number y, number w, number h) |
→ |
this |
|
Path
| beginPath() |
→ |
this |
|
| closePath() |
→ |
this |
|
| moveTo(number x, number y) |
→ |
this |
|
| lineTo(number x, number y) |
→ |
this |
|
| quadraticCurveTo(number cpx, number cpy, number x, number y) |
→ |
this |
|
| bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y) |
→ |
this |
|
| arcTo(number x1, number y1, number x2, number y2, number radius) |
→ |
this |
|
| rect(number x, number y, number w, number h) |
→ |
this |
|
| arc(number x, number y, number radius, number startAngle, number endAngle, boolean anticlockwise) |
→ |
this |
|
| fill() |
→ |
this |
|
| stroke() |
→ |
this |
|
| clip() |
→ |
this |
|
| isPointInPath(number x, number y) |
→ |
boolean |
|
Text
| fillText(string text, number x, number y [, number maxWidth]) |
→ |
this |
|
| strokeText(string text, number x, number y [, number maxWidth]) |
→ |
this |
|
| measureText(string text) |
→ |
TextMetrics |
|
Images
| drawImage(HTMLImageElement image, number dx, number dy [, number dw, number dh]) |
→ |
this |
|
| drawImage(HTMLImageElement image, number sx, number sy, number sw, number sh, number dx, number dy, number dw, number dh) |
→ |
this |
|
| drawImage(HTMLCanvasElement image, number dx, number dy [, number dw, number dh]) |
→ |
this |
|
| drawImage(HTMLCanvasElement image, number sx, number sy, number sw, number sh, number dx, number dy, number dw, number dh) |
→ |
this |
|
| drawImage(HTMLVideoElement image, number dx, number dy [, number dw, number dh]) |
→ |
this |
|
| drawImage(HTMLVideoElement image, number sx, number sy, number sw, number sh, number dx, number dy, number dw, number dh) |
→ |
this |
|
Pixel Manipulation
| createImageData(number sw, number sh) |
→ |
ImageData |
|
| createImageData(ImageData imagedata) |
→ |
ImageData |
|
| getImageData(number sx, number sy, number sw, number sh) |
→ |
ImageData |
|
| putImageData(ImageData imagedata, number dx, number dy [, number dirtyX, number dirtyY, number dirtyWidth, number dirtyHeight]) |
→ |
this |
|
References
HTML5 Draft Recommendation – The Canvas Element
Mozilla Developer Center – Canvas
) is private.
