function getRGBA(data, i) { let out = []; for (let j = i * 4; j < i * 4 + 4; j++) { out.push(data[j]); } return out; } function setRGBA(data, i, input) { for (let j = i * 4; j < i * 4 + 4; j++) { data[j] = input[j - i * 4]; } } function Game(baseMap) { this.img = new Image(); this.baseMap = baseMap; } Game.prototype.main = function() { var {biomes, ctx} = this; var dat = ctx.getImageData(0,0,800,400); var data = dat.data; for (let i = 0; i < biomes.data.length; i++) { let rgba = getRGBA(biomes.data,i); if (rgba[0] == 255 && rgba[1] == 255 && rgba[2] == 255 && rgba[3] == 255) { setRGBA(data,i,[255,255,255,255]) } else { setRGBA(data,i,[0,0,0,255]); } } ctx.putImageData(dat,0,0,0,0,800,400); } Game.prototype.loop = function() { let that = this; setInterval(function() { that.main() } ,1000 / 60); } Game.prototype.startGame = function() { var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); this.ctx = ctx; ctx.drawImage(this.img, 0, 0,800,400); var dat = ctx.getImageData(0,0,800,400); this.biomes = dat; this.loop(); } Game.prototype.init = function() { let that = this; this.img.src = this.baseMap; this.img.onload = function() { that.startGame() }; } new Game("base.png").init();