Question

I want to create a 2d array that represents my 2d canvas. For each pixel, I will look up the value and then save an integer {0, 1, 2, 3, 4} as each element of the array. Unfortunately, this takes way too friggin’ long to run each time I load the game.

How can I write a script that creates this array for me and outputs the array code so I can just paste it in a js file and have it preloaded? (I’m prototyping a game, so I just need to run this for my test map or two.)

Answer 1

your canvas(‘2d’) context, contains a method getImageData() that will return a 1D array, that contains information about all the pixels. this array contains four values for each pixel representing: R, G, B, A.

so, you can do something like:

var context = canvas.context('2d');
var imageData = context.getImageData();
console.log(imageData):

copy the log from the console and paste it into a variable in your file…

var imageData = [.......];
var context = canvas.context('2d');
context.setImageData(imageData);

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#2dcontext