Javascript beginner headaches.

suzaane

I am a bit of a beginner at javascript so this is probably a stupid question but my brain is confused from looking at code too long.

basically i'm making a heatmap using javascript and canvas and need to save clicks. I have a multidimensional array and so every time i click on a point it adds one to the array.

so then when i'm finished the recording the clicks i want to draw a circle out for every click that there was and in the place it was clicked (obvs). there's no problem with the drawing just the actual placement of the circle.

my theory was that the multidimensional array would store the x and y value for me in that the first array would be the x value and the second array would be the x. am i right in thinking this?

so this is the code and where the circle is being drawn the first parameters are the x and y but when i run it it doesnt seem to want to draw anything, should this in theory work? soz if this is ridiculously stupid. but i'm loooost.

for(i=0; i < clickArray.length; i++ ) {
for (j=0; j<clickArray.length; j++) {

var clickCount = clickArray[j];

var cx = clickArray;
var cy = clickArray[j];


if (clickCount > 0) {

var color = colourChoose(clickCount);

console.log(color);

//draws the circle
var context =document.getElementById("myCanvas").getContext("2d");
context.beginPath();
context.arc(cx,cy,10,0,2*Math.PI, true);
context.fillStyle = color;
context.fill();

if i enter regular integers where cx and cy are it works fine but otherwise it's a no go.

Procasinator

These 3 lines of code:

var clickCount = clickArray[i][j];

var cx = clickArray[i];
var cy = clickArray[j];

Don't look correct to me. How can cx and cy be integer values when clickCount[x] (where x is an integer) returns another array that holds the y values for the x chosen.

Should cx and cy be set to i and j respectively?

Just a note, it may be worth renaming i and j to x and y, as well; using generic index variables is fine in loops, but in this case you can be more expressive without sacrifice.

Talisman

my theory was that the multidimensional array would store the x and y value for me in that the first array would be the x value and the second array would be the x y.

So ...

[PHP]for(x=0; x < clickArray.length; x++ ) {
for (y=0; y<clickArray[x].length; y++) {

var clickCount = clickArray[x][y];
var cx = x;
var cy = y;

if (clickCount > 0) {

var color = colourChoose(clickCount);

console.log(color);

//draws the circle
var context =document.getElementById("myCanvas").getContext("2d");
context.beginPath();
context.arc(cx,cy,10,0,2*Math.PI, true);
context.fillStyle = color;
context.fill();[/PHP]

DonkeyStyle \o/

Why don't you just store them together? eg. x, y], [x, y], [x, y
It gives you one loop to worry about, and you can address them with x = array[0] and y = array[1]. It'd be a lot less confusing.