View on GitHub


A canvas wrapper for lightweight animations. Ideal for simple animated UI elements in the 2d rendering context.

Download this project as a .zip file Download this project as a tar.gz file


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 Static n/a
context.restore() Static n/a
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)
context.fillText(text, x, y [, maxWidth ] )
context.strokeText(text, x, y [, maxWidth ] )
metrics = context.measureText(text)
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 ])