Create smooth animation in canvas

Question

I have a canvas object which is rendering an image. When the user click on button the image will move to right. My problem is this movement is not smooth. The image is simply jumping to the specified position. How can I make this movement smooth? This is the codepen example Can anyone please help me?

 $(window).on('load', function () {
            myCanvas();
        });

        function myCanvas() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var x = 0;

            function fly() {

                ctx.clearRect(0, 0, c.width, c.height);
                ctx.closePath();
                ctx.beginPath();

                var img = new Image();
                img.onload = function () {
                    ctx.drawImage(img, x, 0);
                };
                img.src = 'http://via.placeholder.com/200x200?text=first';
            }

            fly();

            $('#movebutton').click(function () {
                for (i = 0; i < 200; i++) {
                    x = i;
                    requestAnimationFrame(fly);
                }
            });

        }

 <canvas id="myCanvas" width="960" height="600"></canvas>
    <button id="movebutton">Move</button>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Answer 1

First of all, why are you loading your image in your frame rendering function - if cache is disabled, it will request an image every frame!

I rewrote the script so that the animation is linear and smooth, you can edit the speed variable to adjust the movement speed.

      $(window).on('load', function () {
        var img = new Image();
        img.onload = function () {
          myCanvas(img);
        };
        img.src = 'http://via.placeholder.com/200x200?text=first';

    });

    function myCanvas(img) {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var x = 0;
        var last_ts = -1
        var speed = 0.1

        function renderScene() {
            ctx.clearRect(0, 0, c.width, c.height);
            ctx.closePath();
            ctx.beginPath();
            ctx.drawImage(img, x, 0);             
        }

        function fly(ts) {
            if(last_ts > 0) {
              x += speed*(ts - last_ts)
            }
            last_ts = ts

            if(x < 200) {
              renderScene()
              requestAnimationFrame(fly);
            }
        }
        renderScene()
        $('#movebutton').click(function () {
          x = 0;
          requestAnimationFrame(fly);
        });

    }