Canvas color detection
Reading the color on the canvas is not the right way to proceed, for several reasons : 


You want the color string (expl : 'red'), not the r,g,b values provided by getImageData
(expl : 255, 0, 0) .  
You can't draw the buckets with gradient or color animation with such a method.  


Anyway you are the one handling the buckets, so what about keeping them all within a nice Object ?
And what about going Object for the buckets also ? You'll have great flexibility to change anything to your buckets later.

Below I define a BucketGrid class that will handle the buckets, and a Bucket class that holds data relative to a bucket.

http://jsfiddle.net/gamealchemist/ydtkbzoc/6/

BucketGrid Class :

function BucketGrid(columnCount, rowCount, bucketWidth, bucketHeight) {
    var buckets = [];
    this.columnCount = columnCount;
    this.rowCount = rowCount;
    this.bucketWidth = bucketWidth;
    this.bucketHeight = bucketHeight;

    this.getBucket = function (column, row) {
        return buckets[column + row * columnCount];
    }

    this.setBucket = function (column, row, bucket) {
        bucket.column = column;
        bucket.row = row;
        buckets[column + row * columnCount] = bucket;
    }

    this.insertNewBucket = function (column, row, color) {
        this.setBucket(column, row, new Bucket(this, color));
    }

    this.isValidPosition = function (column, row) {
        return ((column &gt;= 0) &amp;&amp; (column &lt; this.columnCount) &amp;&amp; (row &gt;= 0) &amp;&amp; (row &lt; this.rowCount));
    }

    this.draw = function (context) {
        for (var i = 0; i &lt; buckets.length; i++) {
            var thisBucket = buckets[i];
            if (thisBucket) thisBucket.draw(context);
        }
    }

}


Bucket Class : 

function Bucket(owner, color) {
    this.owner = owner;
    this.column = 0;
    this.row = 0;
    this.color = color;

    this.draw = function (context) {
        var owner = this.owner,  bw = owner.bucketWidth,  bh = owner.bucketHeight;
        context.fillStyle = this.color;
        context.strokeStyle = '#000';
        context.save();
        context.translate(this.column * bw, this.row * bh);
        context.fillRect(0, 0, bw, bh);
        context.strokeRect(0, 0, bw, bh);
        context.restore();
    }
}


Setup : 

var buckets = new BucketGrid(4, 38, 100, 10);

buckets.insertNewBucket(2, 20, 'red');
buckets.insertNewBucket(2, 21, 'magenta');

/*moving grey character*/
var hero = new Bucket(buckets, 'grey');


Handlers : 

/*Function to move the grey character from left to right and from top to button*/
function move(e) {
    var keyCode = e.keyCode;
    switch (keyCode) {
        case 37:
            if (buckets.isValidPosition(hero.column - 1, hero.row)) hero.column--;
            break;
        case 39:
            if (buckets.isValidPosition(hero.column + 1, hero.row)) hero.column++;
            break;
        case 40:
            /*down arrow*/
            if (buckets.isValidPosition(hero.column, hero.row + 1)) hero.row++;
            break;
        case 38:
            /*up arrow*/
            if (buckets.isValidPosition(hero.column, hero.row - 1)) hero.row--;
            break;
    }
    var hovered = buckets.getBucket(hero.column, hero.row);
    colorDiv.innerHTML = hovered ? hovered.color : 'none';

    drawScene();
}

function drawScene() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    buckets.draw(context);
    hero.draw(context);
}


launch the game :

var canvas = document.getElementById("canvas");
var colorDiv = document.getElementById('whichColor');
var context = canvas.getContext("2d");

document.onkeydown = move;
drawScene();