html5 - Javascript inidividual sprite fade out on canvas? -

So I have a basic canvas setting, where the sprites are added slightly above the canvas if their Y position canvas height It is not an impressive creation.

All this works well, but what I really want, the same goes for every unique phantom, because it takes the page down. Not the way.

Modifying the global alpha of the canvas reference is not good enough as it affects the entire canvas (as far as I've seen). I personally want to influence every phantom - so it will start with the opacity of 255 and gradually decreases by 0 because it also takes down the page.

It is a huge task to change image data, especially considering the status of the images are always changing (well, vertically, at least) and in one at a time Can be up to 60.

I know I could (if I really wanted) make and delete the HTML image tag and modify the opacity through the CSS in each images, but it also does not seem very practical Again, I am thinking that I can make up to 60 on any page at any given time.

Either way I can get it, even though it is one of the above techniques which has made a bit more efficient?

a) If you are only portraying those items, Alpha can be set such as:

  function drawSprite (x, y) {ctx.globalAlpha = 1 - (y / canvashaite); Ctx.drawImage (mySprite, x, y); }  

In this way all the draws are made with the correct alpha.

(You have to define the var canvas = canvas. Hi first)

b) If you do some other operation and you are not sure that the next operation has set the global alpha Then, after the draw, restart it for one (all other functions should use alpha of 1):

  function drawSprite (x, y) {ctx.globalAlpha = 1 - (y / canvasHeight); Ctx.drawImage (mySprite, x, y); Ctx.globalAlpha = 1; }  

c) Another taste may be to save / restore global alpha by itself:

  function drawSprite (x, y) {Var lastGlobalAlpha = ctx global elf; Ctx.globalAlpha = 1 - (y / canvashaite); Ctx.drawImage (mySprite, x, y); Ctx.globalAlpha = Ultimate Global Alfa; }  

In this way you are certain that the drawSprite will not affect the existing global alpha, whatever its value.

d) Finally you have CTX .save () and ctx.restore () which allows you to make local changes that will not affect other draws. C,), but I'll just write the code for the record:

  function drawSprite (here, you only change global alpha, you can make better use), b) or best: C), x, y) {ctx.save (); Ctx.globalAlpha = 1 - (y / canvashaite); Ctx.drawImage (mySprite, x, y); Ctx.restore (); }