отдельные заливки для отдельных прямоугольников

Question

Эй, у меня есть следующие функции:

function rect(x,y,w,h,col) {
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.lineWidth = '1px';
    ctx.fillStyle = col;
    ctx.stroke();
    ctx.closePath();
    ctx.fill();
}
function showMap() {
    canvas = document.getElementById('map_console');
    ctx = canvas.getContext('2d');
    for (var y = 0; y < world.length; y++) {
        for (var x = 0; x < world[y].length; x++) {
            rect(6*(y+6),6*(x+6),6,6,world[posY][posX].bgCol);
        }
    }

Однако, когда я запускаю это - все прямоугольники на холсте одного цвета ... Я явно не выполняю цикл должным образом: (

Есть идеи?

Примечание:
world[posY][posX].bgCol - это случайный шестнадцатеричный цвет ...

Answer 1

Я внес некоторые коррективы и дополнения в ваш код, и все работы в моих тестах выполняются в FF, Chrome, Opera: HTML:

<canvas id="map_console" width="300px" height="500px"></canvas>

СКРИПТ:

function randColor() {
    var str=Math.round(16777215*Math.random()).toString(16);
    return "#000000".substr(0,7-str.length)+str;
}

var xSize=6,ySize=8;
var world=[];
for(var x=0;x<xSize;x++) {
    world[x]=[];
    for(var y=0;y<ySize;y++)
      world[x][y]={bgCol:randColor()};
}

function rect(x,y,w,h,col) {
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.lineWidth = '1px';
    ctx.fillStyle = col;
    ctx.stroke();
    ctx.closePath();
    ctx.fill();
}
function showMap() {
    canvas = document.getElementById('map_console');
    ctx = canvas.getContext('2d');
    for (var x = 0; x < world.length; x++) {
        for (var y = 0; y < world[x].length; y++) {
            rect(40*x,40*y,40,40,world[x][y].bgCol);
        }
    }
}

showMap();

этообразец в jsfiddle.net: http://jsfiddle.net/dMSE5/

Answer 2

Должно быть что-то не так за пределами этого кода.

Быстрый тест здесь работает отлично.

Это отличается от вашего кода только в том месте, где выполняется вызов переменной world.

И тот факт, что ctx является глобальной переменной (что, вероятно, и ваш случай).