使用绘制函数重载
drawImage(img, x, y);
drawImage(img, x, y, width, height);
drawImage(img, sx, sy, swidth, sheight, x, y , width, height);
sx 可选，时开始剪切的x坐标位置；sy同（y坐标位置）
swidth（被剪切图像的宽度）wheight（被剪切图像的高度）
x,y（画布上放置图像的坐标位置）
width/height（可选，要使用的图像的宽高度，伸展或缩小图像）

var ctx = c.getContext("2d");
var img = new Image();
img.src = "img01.png";
img.onload=function(){
          ctx.drawImage(img, 100,100,100,100,0,0,100,100);
};

像素级操作（有很多操作，示例时通过修改像素反转图像颜色）
img.onload = function(){

ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// convert color
for (var i=0; i<imgData.data.length; i+=4){
      imgData.data = 255-imgData.data;
     imgData.data[i+1] = 255-imgData.data[i+1];
    imgData.data[i+2] = 255-imgData.data[i+2];
    imgData.data[i+3] = 255;
}
ctx.putImagedata(imgdata,0, 0);

}
此例使用了getImageData函数获取图片数据，在Chrome中涉及跨域问题，所发直接在浏览器中浏览，必须通过服务器访问。