javascript - Canvas - image opacity loop (fade in) -

javascript - Canvas - image opacity loop (fade in) -

guys. here bit of code supposed okay, though doesn't work...heh...quite typical =)

function xxx() { var txtcanvas = document.getelementbyid('text'); var textone = txtcanvas.getcontext('2d'); var alpha = 0.5; textone.globalalpha = alpha; // loading image var img = new image(); img.src = "http://tvangeste.com/gallery/selani/tv4_2.jpg" img.onload = function () { textone.drawimage(img, 0, 0); } //end of image loader if (alpha < 1) { alpha += 0.1; } } requestanimationframe(xxx);

this fiddle show how doesn't work... http://jsfiddle.net/gls1owd6/

the script supposed 1 simple thing - fade in image. suggestions? thanks!

you need loop able redraw image @ various opacity levels. loop need doesn't block ui refreshing each monitor update, so, requestanimationframe rescue.

here 1 way go this:

var img = new image(); img.onload = function () { // when image has loaded can utilize it. // self-invoking function used fade in image (function loop() { // can update property straight textone.globalalpha += 0.01; // have opacity involved need clear canvas each time textone.clearrect(0, 0, txtcanvas.width, txtcanvas.height); // redraw image textone.drawimage(img, 0, 0); // if not total opacity, loop (canvas clamp value us) if (textone.globalalpha < 1.0) { requestanimationframe(loop); } else { // when done, phone call next step here... } })(); } // set source lastly step image loading img.src = "http://tvangeste.com/gallery/selani/tv4_2.jpg"

modified fiddle

hope helps!

javascript html5 canvas