Canvas color detection

Question

I am coding a game, and I need to detect the color of a rectangles on a canvas, by moving a character and touching them, so that a message will be displayed "this is magenta" and so on. Please find below the game and my coding, so that you will better understand me:

jsFiddle

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


/*moving grey character*/
var xPos = 0;
var yPos = 0;

var bucketWidth = 100;
var bucketHeight = 10;

context.fillStyle = "grey";
context.fillRect(xPos, yPos, bucketWidth, bucketHeight);
context.strokeRect(xPos, yPos, bucketWidth, bucketHeight);

/*static red character*/
var xPos2 =  canvas.width / 2;
var yPos2 =  canvas.height / 2;

var bucketWidth2 = 100;
var bucketHeight2 = 10;

context.fillStyle = "red";
context.fillRect(xPos2, yPos2, bucketWidth2, bucketHeight2);

/*static magenta character*/

var bucketWidth3 = 100;
var bucketHeight3 = 10;

var xPos3 =  canvas.width / 2;
var yPos3 =  - bucketHeight3 - bucketHeight3 + canvas.height / 2;

context.fillStyle = "magenta";
context.fillRect(xPos3, yPos3, bucketWidth3, bucketHeight3);

/*Function to move the grey character from left to right and from top to button*/

function move(e){

if (e.keyCode === 37 && xPos > 0 && xPos <= canvas.width-bucketWidth){
    xPos -= bucketWidth;
} else if (e.keyCode === 39 && xPos >= 0 && xPos < canvas.width-bucketWidth){
    xPos += bucketWidth;
}  else if (e.keyCode === 40 && yPos >= 0 && yPos < canvas.height-bucketHeight){/*down arrow*/
    yPos += bucketHeight;
}  else if (e.keyCode === 38 && yPos > 0 && yPos <= canvas.height-bucketHeight){ /*up arrow*/
    yPos -= bucketHeight;
}



canvas.width= canvas.width;


context.fillStyle = "grey";
context.fillRect(xPos, yPos, bucketWidth, bucketHeight);
context.strokeRect(xPos, yPos, bucketWidth, bucketHeight);


context.fillStyle = "red";
context.fillRect(xPos2, yPos2, bucketWidth2, bucketHeight2);


context.fillStyle = "magenta";
context.fillRect(xPos3, yPos3, bucketWidth3, bucketHeight3);



}

document.onkeydown = move;

By the way, I was told to use the function getImageData(), but I could not apply the function by moving the character. Somebody send me an example, but it is working by using the mouse and jQuery was used, but I am not allowed to use jQuery. Please see this link.

Answer 1

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

1. You want the color string (expl : 'red'), not the r,g,b values provided by getImageData (expl : 255, 0, 0) .
2. 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 >= 0) && (column < this.columnCount) && (row >= 0) && (row < this.rowCount));
    }

    this.draw = function (context) {
        for (var i = 0; i < 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();