Canvas As Image

[sugondo]

Dear Sir/Madam,

 

I have a question for phaser usage, from what i see from the example you give. The library function is for make game from image. but there is some function that didn't included in this library like change color of image.

 

I just wondering if there is some method to read canvas as image.

 

Thanks for the attention

 

[rich]

There are no commands to change the colour of images at the moment, sorry. If making a canvas game you could update the data stored in game.canvas (or game.context) though. Or create a RenderTexture (which is like a dynamic canvas object that sprites can use as a texture) and modify the data of that. I don't have any examples right now though.

[sugondo]

if it is like that, at least can i use saved canvas that i used to change color as source to render it on phaser?

 

like if i say i used i have canvas named canvas1 and  i make context

 

context = canvas1.getContext('2d');

 

I have change picture color on that context via putImageData of normal html5 code.

 

I am about using the context instead of image. is it possible?

 

Thanks for the respond.

 

 

[rich]

That is what you'd use a RenderTexture for. It gives you a canvas you can modify, but that Sprites can use as their textures when displayed.

[PAEz]

Or did you just want to turn that canvas into an image?
Like this for smallish images....

 

var canvas = document.getElementById("canvas");
var url = canvas.toDataURL();

var newImg = document.createElement("img");
newImg.src = url;

 

 

or if the image is big, do this.....

 

 

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function() {
// no longer need to read the blob so it's revoked
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
});

 

The reason youd do it different for big images is that if you try to use too big a dataurl in src it will crash....well thats been my experience in Chrome anyways.

Both those code examples came from.....

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement