0

I am trying to make animation over video in canvas and when i add any animation then video fluctuates . if i remove hello function then it works animation starts on video play function .please look my code and tell me how to debug it. i want only smooth animation over video

<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>
Aditya Kumar
  • 41
  • 1
  • 6
  • I would say that jcanvas is rendering to the canvas using (hopefully) `requestAnimationFrame` which is at 60fps you should also use `requestAnimationFrame` to call the `loop` function. You should likely call `hello()` after you start the `loop` but this can not guarantee you get your function in befor jCanvas. You need to get jCanvas to do both the animation and the video rendering. – Blindman67 Jul 04 '17 at 12:19
  • now i am using `requestAnimationFrame` but problem is still same – Aditya Kumar Jul 07 '17 at 09:56

0 Answers0