SOURCE

let c = document.getElementById("cv")
var ctx = c.getContext("2d")
ctx.fillStyle = "#d77"
ctx.fillRect(10,10,50,50)
console.log(ctx.width)
var red,green,blue,alpha,average
function copy() {
    var imgData = ctx.getImageData(10,10,50,50)
    var data = imgData.data
    for(var i=0;i<data.length;i+=4){
        red = data[i]
        green = data[i+1]
        blue = data[i+2]
        alpha = data[i+3]

        // 求得rgb的平均值
        average = Math.floor((red+green+blue)/3)
        // 设置颜色值，透明度不变
        data[i] = average
        data[i+1] = average
        data[i+2] = average 
    } 
    // 回写图像数据
    imgData.data = data
    ctx.putImageData(imgData,10,70)
}

setTimeout(function(){
    copy()
},3000)

<canvas id="cv" width="300" height="300" style="border:1px solid gray"></canvas>