weird-canvas-bug.js

const p = r.place;
const colors = [
    { r: 255, g: 255, b: 255 },
    { r: 228, g: 228, b: 228 },
    { r: 136, g: 136, b: 136 },
    { r: 34,  g: 34,  b: 34 },
    { r: 255, g: 167, b: 209 },
    { r: 229, g: 0,   b: 0 },
    { r: 229, g: 149, b: 0 },
    { r: 160, g: 106, b: 66 },
    { r: 229, g: 217, b: 0 },
    { r: 148, g: 224, b: 68 },
    { r: 2,   g: 190, b: 1 },
    { r: 0,   g: 131, b: 199 },
    { r: 0,   g: 131, b: 199 },
    { r: 0,   g: 0,   b: 234 },
    { r: 207, g: 110, b: 228 },
    { r: 130, g: 0,   b: 128 }
];

let ourColors = null;
var timer = 0;
const referenceImage = new Image();
referenceImage.crossOrigin = "Anonymous";
let storedData = [];

const getDistanceTo = (color, r, g, b) => Math.sqrt(
    Math.pow(r - color.r, 2) +
    Math.pow(g - color.g, 2) +
    Math.pow(b - color.b, 2)
);

const getColorIndex = (r, g, b) => {
    if (r == 255 && g >= 0 && b == 255) {
        return null;
    }
    const sorted = colors.map((color, i) => {
        return { distance: getDistanceTo(color, r, g, b), index: i };
    }).sort((a, b) => a.distance - b.distance);
    return sorted[0].index;
}

referenceImage.onload = function() {
    const canvas = document.createElement("canvas");
    canvas.width = 1000;
    canvas.height = 1000;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(referenceImage, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    storedData = imageData;
    ourColors = [];
    for (let y = 0; y < 1000; y++) {
        if (ourColors[y] == null) {
            ourColors[y] = [];
        }
        for (let x = 0; x < 1000; x++) {
            let i = ((1000 * y) + x) * 4;
            let red = imageData[i];
            let green = imageData[i + 1];
            let blue = imageData[i + 2];
            ourColors[y][x] = getColorIndex(red, green, blue);
        }
    }
}

const loadImage = () => {
    console.log("Refreshing image data");
    referenceImage.src = 'http://remote-server.com/image.png?' + Math.random();
};
loadImage();
setInterval(() => loadImage(), 60e3);
setInterval(() => {
    timer -= 1e3;
    console.log("Waiting for " + Math.max(0, Math.floor(timer / 1000)) + " seconds");
}, 1e3);

r.placeModule("placeBot", loader => {
    const api = loader("api");
    const doIt = () => {
        if (ourColors == null) {
            setTimeout(() => doIt(), 10e3);
            return;
        }
        let timeRemaining = p.getCooldownTimeRemaining();
        console.log("Setting timer to " + Math.floor(timeRemaining / 1000));
        timer = timeRemaining;
        setTimeout(() => {
            api.getCanvasBitmapState()
            .then((a, previousColors) => {
                for (let y = 0; y < 1000; y++) {
                    for (let x = 0; x < 1000; x++) {
                        const color = ourColors[y][x];
                        const previousColor = previousColors[x + (y * 1000)];
                        if (color !== null && color !== previousColor) {
                            p.setColor(color);
                            p.drawTile(x, y);
                            let i = ((1000 * y) + x) * 4;
                            console.log("Drawing at " + x + ", " + y + " (https://www.reddit.com/r/place/#x=" + x + "&y=" + y + ") Prev color: " + previousColor + ", New color: "+ color + ", ref: "+ storedData[i] + ","+storedData[i+1]+","+storedData[i+2]);
                            setTimeout(() => doIt(), 10e3);
                            return;
                        }
                    }
                }
                console.log("Nothing to fix");
                setTimeout(() => doIt(), 5e3);
            });
        }, timeRemaining);
    }
    console.log("Running script");
    doIt();
});