Consider the following function which should draw an image to the canvas in chunks, cache those chunks, and then on the next loop check against those cached chunks to make sure we don't draw anything more then once.
If the console.log confirms that the cached chunk array is never cleared, why is it that when the result of pixels.data == cachedImage[y][x] is printed, it always returns false, but after updating the cache it reports as true?
async function temp() {
const DIVIDE = 8;
for(let y = 0; y < DIVIDE; y++) {
if(cachedImage[y] == undefined) {cachedImage[y] = []; console.log(y);}
for(let x = 0; x < DIVIDE; x++) {
let widthChunk = (drawBuffer.width)/DIVIDE;
let heightChunk = (drawBuffer.height)/DIVIDE;
let pixels = ctx.getImageData(x*widthChunk,y*heightChunk,widthChunk-1,heightChunk-1);
let pixeldata = pixels.data;
debugBox3.innerHTML = (cachedImage[y][x] == pixels.data); // always "false"
if(pixels.data == cachedImage[y][x]) {
} else {
cachedImage[y][x] = pixels.data;
ctxFinal.putImageData(pixels,x*widthChunk,y*heightChunk)
}
debugBox4.innerHTML = (cachedImage[y][x] == pixels.data); // always "true"
}
}
}
await temp();
Suppose the following code:
let object1 = { key: 'value' }
var object2 = { key: 'value' }
One would think that object1 == object2 is true, but its not. Why? Because object1 and object2 are merely references to objects - to independent objects that is.
However, if we extend the code:
let object1 = { key: 'value' }
var object2 = { key: 'value' }
object1 = object2
Now we have set the variable object1 equal to the reference to object2. We have not copied object2.
Therefore object1 == object2 is now true.
When you say cachedImage[y][x] = pixels.data; you actually make cachedImage[y][x] a reference to pixels.data. Only then is it equal to pixels.data (which is also just a reference).
This is somewhat familiar to pointers in c, see: https://www.sitepoint.com/how-javascript-references-work.