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();