Обработчики mouseenter() и mouseleave()

$(document).ready(function(){
            var canvas = document.getElementById("canvas");
            var ct = canvas.getContext("2d");
            var pos = 0;
            var timerEnter;
            var timerLeave;
 
            function drawEnter(){
                ct.fillStyle = "#ddd";
                ct.fillRect(0,0,canvas.width,canvas.height);
 
                ct.fillStyle = "rgba(0,0,200,0.5)";
                ct.fillRect(30+pos,30,55,50);
            }
 
            function drawLeave(){
                ct.fillStyle = "#ddd";
                ct.fillRect(0,0,canvas.width,canvas.height);
 
                ct.fillStyle = "rgba(0,0,200,0.5)";
                ct.fillRect(30-pos,30,55,50);
            }
 
            function cvEnter (){
 
                drawEnter();
                if( pos < 100){
                    clearTimeout(timerLeave);
                    timerEnter = setTimeout(cvEnter,20);
                    pos+=10;
                }
 
            }
            function cvLeave(){
                drawEnter();
                if( pos > 0){
                    clearTimeout(timerEnter);
                    timerLeave = setTimeout(cvLeave,20);
                    pos-=10;
                }
 
            }
            $("canvas").mouseenter(function(){ if (pos === 0 ) cvEnter(); });
            $("canvas").mouseleave(function(){ if (pos === 100 ) cvLeave(); });
        });

$("canvas").mouseenter(function(){ if (pos <= 0 ) cvEnter(); });
            $("canvas").mouseleave(function(){ if (pos >= 100 ) cvLeave(); });