html5 像素化

function draw(id){
        var canvas = document.getElementById(id);
        if(canvas.getContext == null){
            return false;
        }
        var context = canvas.getContext("2d");
        var img = new Image();
        img.src = "heng.jpg";
        img.onload = function(){
            context.drawImage(img,0,0,500,500);
            var imageData = context.getImageData(0,0,canvas.width,canvas.height);
            var pixels = imageData.data;
            
            context.clearRect(0,0,canvas.width,canvas.height);

            var numTileRows = 100;
            var numTileCols = 100;

            var tileWidth = imageData.width/numTileCols;
            var tileHeight = imageData.height/numTileRows;

            for(var r = 0; r < numTileRows; r++){
                for(var c = 0; c < numTileCols; c++){ 
                    // 取每个小块的中心点坐标
                    var x = (c * tileWidth) + tileWidth/2;
                    var y = (r * tileHeight) + tileHeight/2;

                    var pos     = Math.floor(y) * imageData.width * 4 + Math.floor(x) * 4;
                    var red     = pixels[pos];
                    var green     = pixels[pos+1];
                    var blue     = pixels[pos+2];
                    context.fillStyle = "rgb(" + red + " ," + green + "," + blue +")";
                    context.fillRect(x - (tileWidth/2),y - (tileHeight/2), tileWidth,tileHeight );
                }
            }

        };
    }
    draw("myCanvas");