javascripthtml5-canvasjcanvas

issue on animate layer in second time in jcanvas

I am calling a function which contain all draw method and then i am calling another function with all animate method and issue is that,

when i am calling second function first time it works perfectly but second animation time is not working

<!DOCTYPE html>
<html>

<head>
    <title>mask image</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        @font-face {
            font-family: "Kimberleyy";
            src: url("RAINFALL.otf") format("truetype");
        }

        .fromdiv {
            padding: 5%;
            margin: 5%;
            border: 1px dashed #ccc;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.js"></script>
</head>

<body style="background-color:#f0f0f0">
    <div class="row">
        <div class="col-md-5">
            <div class="form-group text-right">
                <button type="button" class="btn btn-primary" id="btnrestore">Restore</button>
                <button type="button" class="btn btn-primary" id="btnanimate">Animate</button>
            </div>
        </div>
        <div class="col-md-7">
            <div style="text-align:right">
                <canvas id="can" style=" background-color:#fff; margin:0px auto;" width="800" height="500"></canvas>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            //adi();
            //jio();
            $('#btnrestore').click(function () {
                adi();
            });
            $('#btnanimate').click(function () {
                jio();
            });
        });
    </script>
    <script>
        function ssd() {
            $('canvas').restoreCanvas();
        }
        c = document.getElementById("can");
        c.width = 895;
        c.height = 630;

        function adi() {
            $('canvas').drawImage({
                source: '5222470-fantastic-images.jpg'
                , x: c.width / 2
                , y: c.height / 2
                , width: 1195
                , height: 730
                , layer: true
                , name: 'bgimg'
            , }).drawVector({
                fillStyle: '#002051'
                , strokeWidth: 4
                , rounded: true
                , closed: true
                , x: 580
                , y: 450
                , a1: 90
                , l1: 500
                , a2: 180
                , l2: 200
                , a3: 270
                , l3: 710
                , a4: 20
                , l4: 215
                , layer: true
                , name: 'vct2'
            , }).drawText({
                fillStyle: '#fff'
                , x: c.width / 1.45
                , y: 550
                , fontSize: 48
                , lineHeight: 1.1
                , maxWidth: 440
                , fontFamily: 'Kimberleyy, sans-serif'
                , text: 'LOREMIPS UM DOLOR'
                , layer: true
                , name: 'txt1'
            });
        }

        function jio() {
            $('canvas').animateLayer('bgimg', {
                width: 1430
                , height: 953
            }, 4000,'swing');
        }
    </script>
</body>

</html>
Solution

  • It must be the jquery version problem. Try older version of jquery.

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    Here i use jquery 1.12.4, and it works, here