Array access element inside jQuery object
I want to fill the canvas with a color that is an array element 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 that is the hexadecimal 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 warning is not triggered.
source to share
The main problem is that you need to use colorObj[color]
to navigate to your list of colors instead of colorObj.color
because you want to use the value of the variable color
to select a specific list of colors within colorObj
. (I assume you can later have an entry color2
inside colorObj
, etc., fix it?)
Also you are missing the first item of the color list by starting the loop with 1
, and the loop limit is 10
to use .length
the color list instead of hardcoding.
You are missing a var
couple of variables inside the loop, and since you are setting cc
, canvas.width
and canvas.height
everything to the same value, you can also do it all in one statement.
As a simplification hint, there is no need to provide your element with a canvas
sequential ID and use getElementById()
it to find it. Instead, you can keep a reference to the element when you create it and just use it.
I've also taken out width=
and height=
in the HTML for the element canvas
; they are redundant as you set the width and height in your code.
Finally, please unpin your code! :-)
So, you can 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');
source to share
Are the values in the rows of the color1 array or other variables? If they are strings, it should be:
color1: ['orange','amber','apricot','tangerine','bittersweet','persimmon','salmon','peach','pumpkin']
Remember, the first element in the array is at index 0, so to fix the for loop I would do:
for(var i = 0; i < colorsObj.color1.length; i++)
There is also an error in your warning where you use alert(colorsObj.color[i]);
instead of alert(colorsObj.color1[i]);
(color1, not color)
source to share