Canvas Fade-In / Fade-Out Toggle

HTML

<canvas id="demo" width=500 height=420></canvas><br>
<input id="thing" type="checkbox" name="vehicle" value="Bike"> Toggle<br>

JavaScript

var ctx = demo.getContext('2d'), /// get context
    alpha = 0,          /// current alpha
    delta = .04,        /// delta value = speed
    img = new Image();  /// create image to draw

/// when loading is ok:
img.onload = function() {

    
}

$('#thing').change(function(){
	/// start loop
    if ($(this).is(':checked')) {
        loop1();

        function loop1() {

            /// increase alpha with delta value
            alpha += delta;

            /// clear canvas
            ctx.clearRect(0, 0, demo.width, demo.height);

            /// set global alpha
            ctx.globalAlpha = alpha;

            /// re-draw image
            ctx.drawImage(img, 0, 0);
            
            if(alpha >= 1 ) 
         			return;

            /// loop using rAF
            requestAnimationFrame(loop1);
        }
    }
    else {
    		loop2();

        function loop2() {

            /// decrease alpha with delta value
            alpha -= delta;
            
            /// clear canvas
            ctx.clearRect(0, 0, demo.width, demo.height);

            /// set global alpha
            ctx.globalAlpha = alpha;

            /// re-draw image
            ctx.drawImage(img, 0, 0);
            
            if(alpha <= 0 ) 
         			return;

            /// loop using rAF
            requestAnimationFrame(loop2);
        }
    }
})

/// image to load
img.src = 'http://www.w3schools.com/graphics/pic_the_scream.jpg';