Edit in JSFiddle

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#888";

var frames = 0;
var opacity = 0.0;

var toggleOverlay = function() {
    var $overlay = $('#overlay');
    opacity = 1 - opacity;
    $overlay.css('opacity', opacity);        
}

var toggleRender = function() {
    if(!window.renderTimer) {
        window.renderTimer = setInterval(function() {
            ctx.clearRect(0,0,canvas.width,canvas.height);
                
            ctx.save();
            ctx.translate(canvas.width/2, canvas.height/2);
            ctx.rotate(((new Date().getTime() % 4000) / 4000) * 2 * Math.PI)
            ctx.fillRect(-10, -150, 20, 300);
            ctx.restore();
                    
            frames++;        
         
        }, 1000/40);
        window.fpsTimer = setInterval(function() {
            $('#fps').html(frames);
            frames = 0;
        }, 1000);
     } else {
         clearInterval(window.renderTimer);
         window.renderTimer = undefined;
         clearInterval(window.fpsTimer);
         window.fpsTimer = undefined;
         
    }
}

//document.getElementById("toggleRender").onClick = toggleRender;
$('#toggleRender').click(toggleRender);
$('#toggleOverlay').click(toggleOverlay);
toggleRender();
    

<div style="position: relative">
    <div id="overlay"></div>            
    <canvas width="400" height="300" id="canvas"></canvas>
    <button id="toggleRender">Start/Stop Render</button>
    <button id="toggleOverlay">Toggle Overlay</button>
    <span id="fps">##</span>fps
</div>

#canvas {
    background: #000;
    display: block;
}
#overlay {
    position: absolute;
    width: 400px;
    height: 300px;
    opacity: 0;
    -webkit-transition: opacity 1.5s linear;
    background-image: url("http://droneage.com/img/battle/icon-play-white.png");
    background-repeat: no-repeat;
    background-position: center center;
    
}