Notes
You can call nearly every 2d context method through canDo. Below is a table listing all the methods, their signatures and wether value is added by canDo. I've also provided links to W3C documentation and examples on jsFiddle where I can.
This list of methods is based on W3C Working Draft 25 from May 2011
Methods from HTML Canvas 2D Context
| Method Signature |
Notes |
Fiddle |
| The Canvas State |
| context.save() |
Static |
n/a |
| context.restore() |
Static |
n/a |
| Transformations |
| context.scale(x, y) |
|
dtex/WUasU |
| context.rotate(angle) |
|
dtex/LKRxe |
| context.translate(x, y) |
|
dtex/ABcvJ |
| context.transform(a, b, c, d, e, f) |
Additive |
dtex/rTdsa |
| context.setTransform(a, b, c, d, e, f) |
|
dtex/cswUL |
| Colors and Styles |
| gradient context.createLinearGradient(x0, y0, x1, y1) |
|
|
| gradient context.createRadialGradient ( x0, y0, r0, x1, y1 r1 ) |
|
|
| Simple Shapes |
| context.clearRect(x, y, w, h) |
|
|
| context.fillRect(x, y, w, h) |
|
|
| context.strokeRect(x, y, w, h) |
|
|
| Complex Shapes |
| context.beginPath() |
Static |
n/a |
| context.moveTo(x, y) |
|
|
| context.closePath() |
Static |
n/a |
| context.lineTo(x, y) |
|
|
| context.quadraticCurveTo(cpx, cpy, x, y) |
|
|
| context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) |
|
|
| context.arcTo(x1, y1, x2, y2, radius) |
|
|
| context.arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) |
|
|
| context.rect(x, y, w, h) |
|
|
| context.fill() |
Static |
n/a |
| context.stroke() |
Static |
n/a |
| context.clip() |
Static |
n/a |
| context.isPointInPath(x, y) |
|
|
| Text |
| context.fillText(text, x, y [, maxWidth ] ) |
|
|
| context.strokeText(text, x, y [, maxWidth ] ) |
|
|
| metrics = context.measureText(text) |
|
|
| Images |
| context.drawImage(image, dx, dy) |
|
|
| context.drawImage(image, dx, dy, dw, dh) |
|
|
| context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) |
|
|
| Pixel Manipulation |
| imagedata = context.createImageData(sw, sh) |
|
|
| imagedata = context.createImageData(imagedata) |
|
|
| imagedata = context.getImageData(sx, sy, sw, sh) |
|
|
| context.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ]) |
|
|
1