// called when loading the full state of the game
instanceProto.loadFromJSON = function (o)
{
var canvasWidth = this.canvas.width = o["canvas_w"];
var canvasHeight = this.canvas.height = o["canvas_h"];
var data = this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height).data;
for (var y = 0; y < canvasHeight; ++y) {
for (var x = 0; x < canvasWidth; ++x) {
var index = (y * canvasWidth + x)*4;
for (var c = 0; c < 4; ++c)
data[index+c] = o["image"][index+c];
}
}
// load from the state previously saved by saveToJSON
// 'o' provides the same object that you saved, e.g.
// this.myValue = o["myValue"];
// note you MUST use double-quote syntax (e.g. o["property"]) to prevent
// Closure Compiler renaming and breaking the save format
};[/code:26psdbe6]
"ctx.getImageData" only copy image data, not get the reference. Any modification of this data array would not affect the canvas image.
[code:26psdbe6]var data = this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height).data;[/code:26psdbe6]
The solution of change the image of this canvas is using "ctx.putImageData", imo. Since this method needs an image data parameter, I use "ctx.createImageData" to create a new one, then fill it by saving data. Finally put this new image data back by "ctx.putImageData",