Forums » Help » Apply greyscale filter to an entity

Hello,

I want to apply a greyscale filter to an entity (to denote it as disabled).

After some googling I noticed that it's possible to do this by directly manipulating the canvas pixels.

Has anyone tried to do this before? Is it just going to be a matter of grabbing the image from the animation sheet in the entity and manipulating the pixels from there?

I don't want to do this with jQuery and I don't want to export a greyscale version of my image - this needs to happen on the fly in canvas.

Thanks for all your help.

I wouldn't do this at runtime at all. The easiest and fastest way would be to just include a greyscale version of your sprite in the spritesheet.

If you really want to do it in code, it's not too complicated, but manipulating pixel data is notoriously slow.

Create an offscreen Canvas element, draw the image onto this canvas, get the pixel data of the canvas, loop through each pixel, take the average of the R, G and B values for this pixel and assign it as new R, G and B, put the pixel data back into the canvas and use the canvas itself as the image for the spritesheet.

See the Mozilla article Pixel manipulation with canvas.

Ok thanks - based on your recommendation I will go with an exported grey scale version of the sprite.