Access element of array inside object jQuery

Question

I want to fill a canvas with a color that's an element of an array inside an object and the element index should be i but the code seems to be wrong. The variables inside color1 are already declared and contain a string which is the hex value for the color.

var colorsObj = {
    color1: [orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin]
}

function drawCanvas(color) {
    for(var i = 1; i < 10; i++){
    $('.app').append('<canvas class="shadescolors" id="shade'+i+'"  width="100" height="100">');
    var canvas = document.getElementById('shade'+i);
    var context = canvas.getContext('2d');

    canvas.width = window.innerWidth / 3;
    cc = canvas.width;
    radius = cc/2-10;
    canvas.height = canvas.width;
    context.beginPath();
    context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true);
    alert(colorsObj.color[i]);
    context.fillStyle = colorsObj.color[i];
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = '#8A8A8A';
    context.stroke();
    }
}

drawCanvas('color1');

The alert doesn't fire either.

Answer 1

The main problem here is that you need to use colorObj[color] to get to your color list instead of colorObj.color, because you want to use the value of the color variable to select the specific color list within colorObj. (I assume you may later have a color2 entry inside colorObj, etc., correct?)

Also you're missing the first element of the color list by starting your loop with 1, and the 10 loop limit should use the .length of the color list instead of being hard coded.

You're missing a var on a couple of the variables inside the loop, and since you set cc, canvas.width, and canvas.height all to the same value you may as well do all that in one statement.

As a simplification tip, it isn't necessary to give your canvas element a sequential ID and use getElementById() to find it. Instead you can save a reference to the element when you create it and just use that.

I also took out the width= and height= in the HTML code for the canvas element; they are redundant since you are setting the width and height in your code.

Finally, please indent your code! :-)

So you might try something like this:

var colorsObj = {
    color1: [ orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin ]
}

function drawCanvas( color ) {
    var colorList = colorsObj[color];
    for( var i = 0;  i < colorList.length;  i++ ) {
        var $canvas = $('<canvas class="shadescolors">').appendTo('.app');
        var canvas = $canvas[0];
        var context = canvas.getContext('2d');

        var cc = canvas.width = canvas.height = window.innerWidth / 3;
        var radius = cc/2-10;
        context.beginPath();
        context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true);
        context.fillStyle = colorsList[i];
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = '#8A8A8A';
        context.stroke();
    }
}

drawCanvas('color1');