当我添加动画时，画布层会波动

Question

我正在尝试在画布上制作动画，当我添加任何动画时，视频会发生波动。如果我删除hello函数然后它的工作原理 动画从视频播放功能开始。请查看我的代码并告诉我如何调试它。我只想要视频上的流畅动画

<video id="video" src="Big_Buck_Bunny_small.ogv" muted controls></video>
<div id="theater">
    <canvas id="canvas"></canvas>
    <label>
        <br />Try to play me :)</label>
    <br /> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.min.js"></script>
<script>
    function hello() {
        $('canvas').drawRect({
            layer: true
            , name: 'myBox'
            , fillStyle: '#36c'
            , x: 50
            , y: 50
            , width: 100
            , height: 100
        }).drawRect({
            layer: true
            , name: 'myBox1'
            , fillStyle: '#ccc'
            , x: 50
            , y: 50
            , width: 70
            , height: 70
        })
        $('canvas').animateLayer('myBox1', {
            x: 150
            , y: 150
            , width: 100
            , height: 50
        }, 1000, function (layer) {
            // Callback function
            $(this).animateLayer(layer, {
                fillStyle: 'rgb(204, 51, 51)'
                , x: 250
                , y: 100
                , rotate: 360
            }, 'slow', 'swing');
        });
    }
    $(function () {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var video = document.getElementById('video');
        video.addEventListener('play', function () {
            hello();
            var $this = this; //cache
            (function loop() {
                if (!$this.paused && !$this.ended) {
                    ctx.drawImage($this, 0, 0, canvas.width, canvas.height);
                    setTimeout(loop, 1000 / 30); // drawing at 30fps
                }
            })();
        }, 0);
    });
</script>