How to add coordinates to array

Question

i'm trying to develope a basic JavaScript drawing script.

The script works ok, but my problem is instead of it console logging where each pixel is. Can it simply log a array? So basically if the previous pixel's color is the same as the current pixel in the loop, add that pixel coordinate to the array. If it doesn't match the previous pixel's color, log that array, and create a new one and repeat.

I hope someone will understand what I mean, ultimately I want to save clicks or console logs.

I've tried to accomplish this by creating a array and adding the curXY to the array using lineArray.push(x, y) but it seems it failed.

Here's my script:

var image = new MarvinImage();
image.load("https://i.imgur.com/rrc2Qjl.png", imageLoaded);
var precolor = '000000';
var curcolor = '';

var preXY = (0, 0);
var curXY = (0, 0);
var lineArray = ["0,0"]

function imageLoaded() {
    for (var y = 0; y < image.getHeight(); y = y + 1) {
        for (var x = 0; x < image.getWidth(); x = x + 1) {

            var red = image.getIntComponent0(x, y);
            var green = image.getIntComponent1(x, y);
            var blue = image.getIntComponent2(x, y);
            var alpha = image.getAlphaComponent(x, y);

            //Make it into a RBG value. // rgb("255,255,255") /example/
            var RGBCOLOR = "rgb(" + red + "," + green + "," + blue + ")";
            //console.log(alpha)

            //Convert the RBG to HEX.
            var changetohex = RGBCOLOR.split("(")[1].split(")")[0];
            changetohex = changetohex.split(",");
            var hexcolor = changetohex.map(function(x) { //For each array element
                x = parseInt(x).toString(16); //Convert to a base16 string
                return (x.length == 1) ? "0" + x : x; //Add zero if we get only one character
            });
            hexcolor = hexcolor.join("");

            //set the curcolor var as the current pixel color from loop.
            curcolor = hexcolor
                //set the curXY var as the current XY pixel from loop.
            curXY = (x, y);

            //if the previous pixel color matches the current pixel's color from the loop.
            if (precolor === curcolor) {
                //SOMEHOW ADD THAT PIXEL'S COORDS TO THE ARRAY.
                lineArray.push(x, y)
                console.log(lineArray)
                    //console.log('This pixel color is same as last pixel color.')
            } else {
                precolor = curcolor
                    //console.log(precolor)
            }

        }

    }
}

Answer 1

lineArray can be simple declaration

var lineArray = []

you should prepare an Object like this to keep each point.

           //if the previous pixel color matches the current pixel's color from the loop.
            if (precolor === curcolor) {
                //SOMEHOW ADD THAT PIXEL'S COORDS TO THE ARRAY.
                let point={"x":x,"y":y};
                lineArray.push(point)
                console.log(lineArray)
                    //console.log('This pixel color is same as last pixel color.')
            } else {
                precolor = curcolor
                    //console.log(precolor)
            }